gulpfile-template v1.0.906

gulpfile

一、使用

1.1 下载模版

$ git clone https://github.com/youngjuning/gulpfile.git project

1.2 安装依赖

$ npm install

二、配置项

var opt = {
  production:true, // 生产环境
  wx:true, // 微信开发
  less:true, // 使用less开发
  pug:{
    htmlBeautify:false // pug下html美化方式
  },
  browsers : [
    'Android 2.3',
    'Android >= 4.0',
    'Firefox <= 20',
    'Chrome >=20',
    'ie >= 6',
    'iOS >= 6',
    'Opera >= 12',
    'Safari >= 6'
  ]
}

三、插件列表

3.1 文件压缩

• gulp-uglify：压缩js
• gulp-clean-css：压缩CSS
• gulp-htmlmin：压缩HTML
• gulp-imagemin：可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。gulp-imagemin的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档

$ npm install gulp-uglify gulp-clean-css gulp-htmlmin gulp-imagemin -D

3.2 文件美化

• gulp-csscomb：css代码美化
• gulp-html-beautify：格式化HTML

$ npm install gulp-html-beautify gulp-csscomb -D

3.3 文件合并

• gulp-concat：合并JS文件
• gulp-concat-css：合并CSS文件

$ npm install gulp-concat gulp-concat-css -D

3.4 代码编译

• gulp-pug：编译pug为html
• gulp-less：编译less为css
• gulp-sass：编译sass
• gulp-sourcemaps：gulp源码地图插件
• gulp-autoprefixer：Autoprefixer

$ npm install gulp-pug gulp-less gulp-sass gulp-sourcemaps  gulp-autoprefixer -D

3.5 其他插件

• gulp-load-plugins：插件按需加载插件（惰性加载）
• gulp-plumber：使用gulp-plumber来捕获处理任务中的错误：在gulp的管道流任务处理中，如果某个环节出了错，会导致整个任务中断，包括watch任务，这很麻烦。所以gulp-plumber来了。
• gulp-rename：重命名插件
• gulp-if：条件判断插件
• gulp-clean：删除文件插件

$ npm install gulp-load-plugins gulp-if gulp-plumber gulp-rename -D

四、备选插件

除非以上插件不能用，否则不推荐尝试下面的插件

• gulp-minify-css：压缩CSS
• less-plugin-autoprefixer：不好用的less插件
• gulp-minify-html：压缩HTML