文件名称:多玩前端工作流grunt-workflow.zip
文件大小:36KB
文件格式:ZIP
更新时间:2022-08-07 10:47:57
开源项目 grunt-workflow 是一个帮助前端开发工程师简化工作的工具,它的主要功能是: webserver livereload,能保存文件的时,自动刷新浏览器. 自动编译sass 压缩图片 合并图片 添加文件注释 自动补全css3浏览器前缀 初始化项目目录结构及文件 支持ejs模板 安装相关软件 安装 nodejs window 安装地址 , mac 推荐通过brew安装brew install node 安装 grunt-cli npm install -g grunt-cli 安装 grunt-init npm install -g grunt-init 将当前git克隆到本地%USERPROFILE%\.grunt-init\(Mac平台 ~/.grunt-init/),如果没有.grunt-init目录可用mkdir .grunt-init命令创建 安装 Graphics Magick(gm),下载地址 (Mac平台 brew install GraphicsMagick) 安装 PhantomJS,下载地址 (Mac平台 brew install phantomjs) 安装 sass gem install sass 初始化新项目 在项目目录下执行 grunt-init lego (注意:项目目录要为空文件夹,不然会报错) 根据提示填写相关的内容 执行 npm install 命令下载安装相关依赖 快速在当前文件夹打开命令行 win7:首先按住Shift键,然后选择某文件夹后或在某文件夹中的空白处右键单击,快捷菜单中会多出“在此处打开命令窗口”,选择这个选项即可 Mac:安装 gotoshell 建立软链接 使用下面命令能避免每次在新项目开始前都要使用 npm install 下载相关的grunt插件 window: - mklink /d .\node_modules C:\Users\Administrator\Desktop\grunt_plugins\node_modules mac:ln -s ~/Documents/grunt_plugins/node_modules ./node_modules (~/Documents/grunt_plugins/node_modules) 目录是存放grunt插件的文件夹 项目目录结构 └── src ├── _index.html ├── css │ └── lib ├── img ├── js │ └── lib ├── sass ├── partial ├── data └── slice html页面存放在src文件夹,支持ejs模板(见5)。 css存放在 src/css 文件夹,第三方的样式库放在 src/css/lib js存放在 src/js 文件夹,第三方的样式库放在 src/js/lib src/slice 文件夹放需要合并的图片;若需要多张雪碧图,则自建子文件夹,一个子文件夹对应一张雪碧图,子文件名为雪碧图名(注意,需要替换雪碧图的css文件,切片使用background-image属性来引入,不使用background属性引入。) ejs模板片段放在src/partial文件夹,模板数据放在src/data文件夹。配置数据统一在src/data/config.json指定(注意:没有配置的html页面不参与ejs渲染)。 注意:src/css/lib 和 src/js/lib 里的文件是不会被压缩的。 任务 项目安装好了相关的配置就可以在命令行下使用grunt任务 grunt 默认打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译 grunt port:端口号 指定端口打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译 grunt release 生成发布文件,执行gunt release生成一个dest的目录,检测样式文件里的本地资源引用,如果有无效引用则中断任务,否则执行后续任务:编译html,压缩css、js文件,自动生成sprit图片,替换css样式里的链接。dest里的文件是发布使用的。 grunt dest 打开一个webserver,显示dest目录 grunt assets:提交注释 提交dest里面的静态文件(css、js、img)到静态文件服务器,提交路径为%SVN_REMOTE_DIR%/
【文件预览】:
grunt-workflow-master
----rename.json(4B)
----root()
--------tools()
--------Gruntfile.js(299B)
--------src()
----template.js(5KB)
----.gitignore(98B)
----README.md(6KB)
----config.json(117B)