手记：gulp 入门

#手记

1. 简介

• gulp 是前端开发自动化构建工具，用于配置工作流，依赖于 NodeJS 和 npm。
• 相比于同类的 Grunt，gulp 的配置更加简洁，运行速度更快。
• 使用 npm install gulp --save 安装之后，需在项目根目录新建 gulpfile.js 文件，用于配置及编写构建程序。

2. 常用 gulp 前端相关插件

• 常用 gulp 前端相关插件

  • gulp-sass：SASS 的编译；
  • gulp-autoprefixer：自动添加 CSS 前缀；
  • gulp-minify-css：压缩 CSS；
  • gulp-jshint：JS 代码校验；
  • gulp-concat：合并 JS 文件；
  • gulp-uglify：压缩 JS 代码；
  • gulp-imagemin：压缩图片；
  • gulp-livereload：自动刷新页面；
  • gulp-cache：图片缓存，只有图片替换了才压缩；
  • gulp-notify：更改提醒；
  • del：清除文件；

• 安装：

 npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

3. gulpfile.js 详解

3.0. 项目目录树

.
├── README.md
├── dist
│   ├── css
│   │   └── app.min.css
│   ├── img
│   │   ├── Sample-bg-large.jpeg
│   │   └── Sample-bg-mobile.png
│   ├── index.html
│   └── js
│       └── app.min.js
├── gulpfile.js
├── package.json
└── src
    ├── css
    │   └── app.scss
    ├── img
    │   ├── Sample-bg-large.jpeg
    │   └── Sample-bg-mobile.png
    └── js
        └── app.js

3.1. 引入插件

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del');

3.2. gulp.task() API

• gulp API docs
  
  • gulp.task 用于创建任务；
  • gulp.src 用于设置需要处理的文件路径；
  • gulp.dest 用于设置生成文件的路径；
  • gulp.watch 用于监听文件变化；
  • gulp.run

3.3. CSS 相关：编译 SASS、自动追加前缀以及压缩

gulp.task('css', function() {
  return gulp.src('./src/css/*.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css'))
    .pipe(notify({ message: 'css task is completed!' }));
});

• 通过 gulp.task('sass', function() {}); 定义后，在命令行运行 npm sass 即可执行该任务；
• gulp.src 可以用数组形式选取多个文件：gulp.src([app.scss, main.scss]);，也可以是正则匹配：gulp.src(/**/*.scss);；
• .pipe() 即管道，将当前任务执行完的结果按次序导入下一任务；

3.4. JS 相关：代码校检、合并及压缩

gulp.task('js', function() {
  return gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(notify({ message: 'js task is completed!' }));
});

3.5. 图片压缩

gulp.task('img', function() {
  return gulp.src('./src/img/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('./dist/img'))
    .pipe(notify({ message: 'img task is completed' }));
});

3.6. 监听文件变化

gulp.task('watch', function() {
  gulp.watch('./src/css/*.scss', ['css']);
  gulp.watch('./src/js/*.js', ['js']);
  gulp.watch('./src/img/*', ['img']);
  livereload.listen();
  gulp.watch(['./dist/**']).on('change', livereload.changed);
});

3.7. 设置默认任务

gulp.task('dev', ['css', 'js', 'img'], function() {
  gulp.start('watch');
});

3.8. 完整的 gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del');
/**
 * @description `gulp dev` 任务
 * 1. 编译 SASS 并压缩成 CSS；
 * 2. 压缩、校检 JS；
 * 3. 压缩图片；
 * 4. 监听文件变化持续执行；
 */
gulp.task('dev', ['css', 'js', 'img'], function() {
  gulp.start('watch');
});
/**
 * @description `gulp watch` 任务：监听文件变化执行对应的任务
 */
gulp.task('watch', function() {
  gulp.watch('./src/css/*.scss', ['css']);
  gulp.watch('./src/js/*.js', ['js']);
  gulp.watch('./src/img/*', ['img']);
  // livereload.listen();
  // gulp.watch(['./dist/**']).on('change', livereload.changed);
});
/**
 * @description 清空文件
 */
gulp.task('clean', function(cb) {
  del(['./dist/css', './dist/js', './dist/img'], cb);
});
/**
 * @description `gulp css` 任务：CSS 相关
 * 1. 编译 SASS；
 * 2. 自动追加前缀；
 * 3. 压缩 CSS；
 */
gulp.task('css', function() {
  return gulp.src('./src/css/*.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css'))
    .pipe(notify({ message: 'css task is completed!' }));
});
/**
 * @description `gulp js` 任务：JS 相关
 * 1. JS 代码校检；
 * 2. 合并压缩；
 */
gulp.task('js', function() {
  return gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(notify({ message: 'js task is completed!' }));
});
/**
 * @description `gulp img` 任务：图片压缩
 */
gulp.task('img', function() {
  return gulp.src('./src/img/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('./dist/img'))
    .pipe(notify({ message: 'img task is completed' }));
});

附：参考

• Gulp 入门教程
• Gulp 不完全入门教程