gulp常用插件的使用

今天来看看一下gulp的常用插件的使用

就像gruntjs需要一个Gruntfile.js文件一样，gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。

在项目根目录下新建文件gulpfile.js文件

目录结构

├── gulpfile.js

├── node_modules

│ └── gulp

└── package.json

gulp API介绍

详情查看官方文档

. gulp.task() 用来定义任务

. gulp.src() 需要处理的源文件路径

. gulp.dest() 处理后的发布路径

. gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。

用例

gulp.src(globs[, options])

gulp.src(['js/*.js','css/*.css','*.html'])//使用数组的方式来匹配多种文件

gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件

gulp.dest(path[,options])

gulp.src('script/avalon/avalon.js') //没有通配符出现的情况

    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js

//有通配符开始出现的那部分路径为 **/underscore.js

gulp.src('script/**/underscore.js')

    //假设匹配到的文件为script/util/underscore.js

    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js

gulp.src('script/*') //有通配符出现的那部分路径为 *

    //假设匹配到的文件为script/zepto.js

    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js

gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib

    //假设匹配到的文件为script/lib/jquery.js

    .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script

    //假设匹配到的文件为script/lib/jquery.js

    .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js

gulp.task(name[, deps], fn)

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务

  // Do something

});

//只要执行default任务，就相当于把one,two,three这三个任务执行了

gulp.task('default',['one','two','three']);

gulp.task(glob[, opts], tasks)

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

  //do something

});

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

  //do something

});

gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event){

    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变

    console.log(event.path); //变化的文件的路径

});

参考文章前端构建工具gulpjs的使用介绍及技巧

gulp常用插件

. 编译stylus (gulp-stylus)

. 压缩css (gulp-minify-css)

. 压缩js (gulp-uglify)

. 压缩图片 (gulp-imagemin)

. js检查 (gulp-jshint)

. 文件合并 (gulp-concat)

. 自动刷新 (gulp-livereload) 需要安装谷歌插件LiveReload(2.0.9)

. 文件清理 (gulp-clean)

. 变动监听 (gulp-cache) 只有文件变化了才再次触发任务

. 变动通知 (gulp-notify)

. 文件重命名 (gulp-rename)

gulp的所有插件相关可以在npm官网查询

执行命令安装插件

这里如果出错，或者很久不响应，可以单个单个安装

npm install gulp-stylus gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

引用插件

var gulp = require('gulp'),

    stylus = require('gulp-stylus'),

    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');

创建任务

处理css

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

  return gulp.src('src/styles/main.styl')

    .pipe(stylus({ style: 'expanded' }))

    .pipe(gulp.dest('dist/assets/css'))

    .pipe(rename({suffix: '.min'}))

    .pipe(minifycss())

    .pipe(gulp.dest('dist/assets/css'))

    .pipe(notify({ message: 'Styles task complete' }));

});

说明：

处理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' }));

});

说明：

处理图片

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() {

  // 监听所有.styl

  gulp.watch('src/styles/**/*.styl', ['styles']);

  // 监听所有.js

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

  // 监听所有图片

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

  // 建立即时刷新页面

  var server = livereload();

  // 监听所有在 dist/  目录下的文件，一旦有更动，便进行刷新

  gulp.watch(['dist/**']).on('change', function(file) {

    server.changed(file.path);

  });

});

说明：

完整文件

// 载入外挂

var gulp = require('gulp'),

    stylus = require('gulp-stylus'),

    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.styl')

    .pipe(stylus({ 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() {

  // 监听所有.styl

  gulp.watch('src/styles/**/*.styl', ['styles']);

  // 监听所有.js

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

  // 监听所有图片

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

  // 建立即时刷新页面

  var server = livereload();

  // 监听所有在 dist/  目录下的文件，一旦有更动，便进行刷新

  gulp.watch(['dist/**']).on('change', function(file) {

    server.changed(file.path);

  });

});

项目DEMO待续...