gulp之旅-打造属于自己的前端自动化方案

[linqinghao]

gulp 简介

gulp官网介绍说是一个基于流的自动化构建工具，并且易于使用，构建快速。

开发过程中，我们通常需要自己手动编译、合并、压缩等等，这是一件繁琐的事情，但有了 gulp之后，我们可以通过配置好任务，一键运行，免去这些需要手动的繁琐事情。

安装 gulp

gulp是基于nodejs的，因此需要先安装好nodejs环境。安装 nodejs环境不是重点，略过。

有了nodejs和npm包管理器，就可以安装gulp。

$ npm install -g gulp

这是全局安装gulp，也要在项目下安装gulp。在这之前，要先在项目根目录下新建好package.json文件。

// 新建 package.json 文件
$ npm init

作为项目的开发依赖安装：

$ npm install --save-dev gulp

安装好后再次输入gulp -v查看版本号，出现版本号即为安装成功。

常用gulp插件

• Sass编译 (gulp-ruby-sass)
• 自动添加css前缀 (gulp-autoprefixer)
• 压缩 CSS (gulp-cssnano)
• JS代码校验 (gulp-jshint)
• 合并文件 (gulp-concat)
• 压缩js代码 (gulp-uglify)
• 压缩图片 (gulp-imagemin)
• 自动刷新页面 (gulp-livereload)
• 缓存(gulp-cache)
• 通知提醒 (gulp-notify)
• 清空文件 (del)

安装命令：

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

gulp最常用的几个命令

gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数

gulp.run(tasks...)：尽可能多的并行运行多个task

gulp.watch(glob, fn)：当glob内容发生改变时，执行fn

gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则

gulp.dest(path[, options])：设置生成文件的路径

小例子：编译SASS

首先，在项目根目录下新建一个gulpfile.js文件

1. 引入需要的插件：

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass');

2. 创建任务

gulp.task('styles', function() {
    var cssSrc = './src/sass/*.scss',  // 要编译的文件路径
        cssDst = './dist/styles';  // 编译后放置的文件路径
    return  sass(cssSrc, {style: 'expanded'})
                .pipe(gulp.dest(cssDst));
});

3. 运行任务

$ gulp styles

从图上可以看出，运行之后多出了dist目录, 编译后的css文件就存放在了styles文件夹里。

4. 监听文件改动

gulp.task('watch', function() {
    // 看守所有.scss档
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

5. default 任务

gulp.task('default', function() {
    gulp.start('styles', 'watch');
});

default可以预设一些任务，当我们任务增多的时候，就不需要gulp [task]去指定任务了。直接运行 gulp就能运行default预设的任务。

构建项目

1. 载入gulp插件

载入之前，需要确保已经$ npm install --save [gulp-xxx]这些包。

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

2. 编译sass,自动添加前缀，压缩css

gulp.task('styles', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

3. JSHint，合并js文件, 压缩js

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

4. 压缩图片

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

5. 构建之前清空

gulp.task('clean', function() {
    return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
});

6. 预设任务

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

7. 监听文件改动

gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

});

8. 完整的 gulpfile.js

// 载入
var gulp = require('gulp'), 
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 样式
gulp.task('styles', function() { 
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
 
// 脚本
gulp.task('scripts', function() { 
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
 
// 图片
gulp.task('images', function() { 
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
 
// 清理
gulp.task('clean', function() { 
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});
 
// 预设任务
gulp.task('default', ['clean'], function() { 
    gulp.start('styles', 'scripts', 'images');
});
 
// 看守
gulp.task('watch', function() {
	 
	// 看守所有.scss档
	gulp.watch('src/styles/**/*.scss', ['styles']);
	 
	// 看守所有.js档
	gulp.watch('src/scripts/**/*.js', ['scripts']);
	 
	// 看守所有图片档
	gulp.watch('src/images/**/*', ['images']);
	 
	// 建立即时重整伺服器
	livereload.listen();
	 
	// 看守所有位在 src/  目录下的档案，一旦有更动，便进行重整
	gulp.watch(['src/**']).on('change', function(file) {
	licereload.changed(file.path);
});

});

参考资料

1. Getting started with gulp
2. gulp入门
3. 使用gulp构建你的前端项目