Gulp配置文件示例

前言

前几天写了gulp的基础自动化构建的api。

gulp.src 文件源位置
gulp.task 构建任务名和函数
gulp.dest 放置文件位置
gulp.watch 监控

这次介绍下gulp的几个常用插件和其基本配置:

gulp常用插件

注意: + “使用插件前要先安装对应插件 npm install 插件名字 –save-dev”

+ "如果构建的任务没有放在默认任务default中 命令行执行的时候 gulp 任务名"
+ "task中路径都是与gulpfile放在同一级下"
+ "gulp.dest()指明的目录可以自动被创建"
js压缩,合并,重命名任务
let gulp = require('gulp');
let concat = require('gulp-concat');  // 合并
let uglify = require('gulp-uglify');  // 压缩
let rename = require('gulp-rename');  // 重命名

 let jshint = require('gulp-jshint');  // 注意需要同时安装 jshint
 gulp.task('scripts', function() {  // 这个任务的名称是 scripts
 gulp.src('src/js/*.js')  // 将 src/js/ 目录下的所有 js 文件合并
     .pipe(jshint())
     .pipe(jshint.reporter('default'))
     .pipe(concat('all.js'))  // 指定合并后的文件名为 all.js
     .pipe(gulp.dest('dist/js/'))  // 保存合并后的文件
     .pipe(uglify())  // 压缩
     .pipe(rename('all.min.js'))  // 重命名
     .pipe(rename({suffix: '.min'}))  // 和上一行等效
     .pipe(gulp.dest('dist/js/'));
});
sass编译
let gulp = require('gulp');
let sass = require('gulp-sass');  // sass -> css
let prefixer = require('gulp-autoprefixer');  // 增加前缀
let minify = require('gulp-minify-css');  // css 压缩
let notify = require('gulp-notify');  // 打印提醒语句
let concat = require('gulp-concat');  // 合并

// 编译Sass
 gulp.task('css', function() {  // 任务名
 gulp.src('sass/*.scss')  // 目标 sass 文件
      .pipe(sass())  // sass -> css
      .pipe(prefixer('last 2 versions'))  // 参数配置参考 <https://github.com/ai/browserslist>
      .pipe(minify())  // 压缩
      .pipe(gulp.dest('css'))  // 目标目录
      .pipe(notify({message: 'done'}))
      .pipe(concat('all.min.css'))  // 合并
      .pipe(gulp.dest('css'));  // 目标目录
});
图片压缩
let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache');  // 减少重复压缩

gulp.task('images', function() {
    gulp.src('src/images/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images/'));
});
监控文件
gulp.task('watch', function() {  // 指定任务名为 watch
    gulp.watch('src/sass/a.scss', ['sass']);// 监控 a.scss 文件,如果有修改,则执行 sass 任务
});
删除文件
let gulp = require('gulp');
let clean = require('gulp-clean');

gulp.task('clean', function() {
    return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false})
    .pipe(clean());
});
ES6->ES5

安装插件 npm install gulp-babel babel-preset-es2015 –save-dev

let gulp = require('gulp');
let babel = require('gulp-babel');

gulp.task('scripts', function() {
    gulp.src('src/js/a.js')
        .pipe(babel({  // es6 -> es5
       presets: ['es2015']
}))
        .pipe(gulp.dest('dist/js/'))
});

参考文章:http://www.cnblogs.com/zichi/p/6250504.html

总结

除此之外还有很多插件可供安装,如果引入插件很多可以尝试使用 gulp-load-plugin模块、还有borswer-sync等模块,由于这方面我还没有认真看过所以这里就不详细介绍了,如果个人在刚学gulp的话,我推荐多敲几遍gulpfile.js的配置文件,尝试一些自动化构建自己的小项目,然后根据项目需求再引入其他插件使用或者使用模块。