之前项目开发一直用grunt,最近接触gulp,感觉gulp更好用,于是基于gulp开发了FE-Gulp 一套前端工作流程。也可以是说FF-Gulp采用nodejs+bower+sass+compass+gulp 构建中型(非异步)站点模板!
Gulp 插件
一个Sass 框架,非常好用,谁用谁知道。
搭建本地server+自动刷新网页,适合多个浏览器同事刷新,不用每次F5,解放了双手!
略有损失,但基本无碍。
bower_compents: ----------------通过bower下载下来的文件 css---------------------------------css img--------------------------------img scss--------------------------------scss js lib ------------------------------- 库文件 (通过bower安装下来的文件默认在bower_compents下面下) plugin-----------------------------项目中用到的插件 src---------------------------------未压缩源码 component----------------------项目中组件 core.js----------------------------核心主文件 main.js----------------------------主入口文件 dist-----------------------------------js合并压缩 app.js app.min.js-------------------------src目录下面的压缩合并成一个文件
注:
1.因为CSS 代码主要是通过Compass 框架完成,所以直接交给compass处理就行了)。
- 请先确保已经安装ruby
- 在安装sass、compass(主体安装方法大家百度下)
- 安装nodejs
- 全局安装gulp $ npm install --global gulp
- 全局安装bower $ npm install --global bower
- 进到项目目录下面打开bower.json 里面配置你要安装的库文件,后执行bower install即可。
- 打开package.json 配置你要安装的包文件后,执行npm install 即可。
- 步骤6、7完成后,cmd 进入到你项目目录下面。执行gulp copyFile,它会自动将bower_componts下面的非压缩版文件复制到js/lib目录下。具体的文件列表,大家配置下即可
- 然后gulp, 它会自动打开chrome浏览器并监听你的文件改动,并实时刷新网页。
- 项目开发完毕,上线,执行gulp build, 它会压缩静态资源打包。
1. gulp copyFile : 通过bower安装下来的文件默认在bower_compents下面下,当执行gulp后,它会自动将bower_componts下面的非压缩版文件复制到js/lib目录下,具体的文件列表,大家配置下即可。(项目初始化的执行一次即可)
2. gulp: 开发调试阶段命令主要是解析scss,并实时刷新网页。
3. gulp build: 项目开发完成上线命令(压缩打包压缩合并静态资源)