gulp 综合版

参考文档：

https://github.com/muzhen/gulp/tree/master/two  【by muzhen】
http://www.techug.com/gulp

 

前端项目需要的功能：
1、图片（压缩图片支持jpg、png、gif）：gulp-imagemin（压缩）
2、样式 （支持less同时支持合并、压缩、重命名）：gulp-less（转换），gulp-minify-css（压缩），gulp-rename（重命名）
3、javascript （检查、压缩、合并、重命名）：gulp-jshint（检查），gulp-uglify（压缩），gulp-concat（合并），gulp-rename（重命名）
4、html （压缩）：gulp-htmlmin（压缩）
5、客户端同步刷新显示修改：gulp-livereload（刷新，需配合chrome插件LiveReload及tiny-lr）
6、构建项目前清除发布环境下的文件（保持发布环境的清洁）：gulp-clean（清空）

通过gulp plugins，寻找对于的gulp组件

 

组件：

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

 

项目目录结构：

project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
　　|–assets
　　　　|–css 样式文件(style.css style.min.css
　　　　|–images 图片文件(压缩图片)
　　　　|–js js文件(main.js main.min.js)
　　|–index.html 静态文件(压缩html)

|–src 生产环境
　　|–assets
　　　　|–sass sass文件
　　　　|–images 图片文件
　　　　|–js js文件
　　　　|–css css文件
　　|–pages
　　　　|–home  
　　　　|–product  
　　|–components
　　　　|–modal 弹窗文件
　　　　|–tab tab切换文件
　　　　|–foem 表单文件
　　　　|–table 表格文件
　　|–test
　　　　|–view 
　　　　|–components  
　　|–tasks
　　　　|–  
　　　　|–    

|–gulpfile.js gulp任务文件

|–pacjage.json 项目信息文件

 简易的手册:

/ 说明
gulp.task('help',function () {
  console.log('    gulp build            文件打包');
  console.log('    gulp watch            文件监控打包');
  console.log('    gulp help            gulp参数说明');
  console.log('    gulp server            测试server');
  console.log('    gulp -p                生产环境（默认生产环境）');
  console.log('    gulp -d                开发环境');
  console.log('    gulp -m <module>        部分模块打包（默认全部打包）');
});

/* 默认 */

gulp.task('default',function () {
  gulp.start('help');

});

 定义路径：

http://zhuanlan.zhihu.com/p/19893060

js/app.js 精确匹配文件
js/*.js 仅匹配js目录下的所有后缀为.js的文件
js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
!js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

 定义顺序：

当执行css任务时，Gulp会判断greet任务是否执行完成，如果执行完成，则再调用你定义的函数。

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});