gulp插件

这是我用的一个。

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-clean": "^0.3.2",
  "gulp-concat": "^2.6.1",
  "gulp-connect": "^5.0.0",
  "gulp-cssmin": "^0.1.7",
  "gulp-imagemin": "^3.1.1",
  "gulp-less": "^3.3.0",
  "gulp-load-plugins": "^1.5.0",
  "gulp-plumber": "^1.1.0",
  "gulp-uglify": "^2.0.1",
  "lodash": "^4.17.4",
  "open": "^0.0.5"
}

如果在npm install过程中提示缺少什么，就安装什么。

下面是构建的任务：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); // 用来加载其他的插件
var open = require('open');


var app = {
  srcPath: 'src/',   //这是我的源目录
  devPath: 'build/', //这是开发目录，便于调试
  prdPath: 'dist/', //生产部署目录
}

gulp.task('lib', function(){
  gulp.src('bower_components/**/*.js') //使用bower安装的依赖，没配置.bowerrc
  .pipe(gulp.dest(app.devPath + 'vendor')) //移动插件位置
  .pipe(gulp.dest(app.prdPath + 'vendor'))
  .pipe($.connect.reload()) //改变后重新加载页面，以下均是
})

gulp.task('html', function() {
  gulp.src(app.srcPath + '**/*.html') //所有的html文件照搬到另外两个目录
  .pipe(gulp.dest(app.devPath))
  .pipe(gulp.dest(app.prdPath))
  .pipe($.connect.reload())
})

gulp.task('json', function() {
  gulp.src(app.srcPath + 'data/**/*.json') //所有的json文件照搬到另外两个目录
  .pipe(gulp.dest(app.devPath + 'data'))
  .pipe(gulp.dest(app.prdPath + 'data'))
  .pipe($.connect.reload())
})

gulp.task('less', function() { //使用less编写的css
  gulp.src(app.srcPath + 'style/index.less') //index.less导入其他less文件
  .pipe($.plumber()) //阻止gulp插件发生错误导致进程退出并输出错误日志。
  .pipe($.less()) //less转为css
  .pipe($.autoprefixer()) //自动添加浏览器前缀
  .pipe(gulp.dest(app.devPath + 'css'))
  .pipe($.cssmin()) //压缩css
  .pipe(gulp.dest(app.prdPath + 'css')) 
  .pipe($.connect.reload())
})

gulp.task('js', function() {
  gulp.src(app.srcPath + 'script/**/*.js')
  .pipe($.plumber()) //阻止gulp插件发生错误导致进程退出并输出错误日志。
  .pipe($.concat('index.js')) //全部打包为index.js
  .pipe(gulp.dest(app.devPath + 'js'))
  .pipe($.uglify())// 混淆（丑化）js
  .pipe(gulp.dest(app.prdPath + 'js'))
  .pipe($.connect.reload())
})

gulp.task('image', function() {
  gulp.src(app.srcPath + 'image/**/*')
  .pipe(gulp.dest(app.devPath + 'image'))
  .pipe($.imagemin()) // 这个插件可能会出问题，要删掉后使用npm重新安装
  .pipe(gulp.dest(app.prdPath + 'image'))
  .pipe($.connect.reload())
})

gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']); //任务依赖

gulp.task('clean', function() { //这个任务清除文件夹
  gulp.src([app.devPath, app.prdPath])
  .pipe($.clean());
});

gulp.task('serve', ['build'], function() {
  $.connect.server({ //开一个服务器
    root: [app.devPath],
    livereload: true,
    port: 3000
  });

  open('http://localhost:3000'); //自动打开浏览器

  gulp.watch('bower_components/**/*', ['lib']);
  gulp.watch(app.srcPath + '**/*.html', ['html']);
  gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
  gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
  gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
  gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

gulp.task('default', ['serve']);

上面就是我在项目中使用的一些gulp插件。下面还有我喜欢的：

gulp.spritesmith

gulp多张图片自动合成雪碧图
用于合成雪碧图。

/引入gulp
var gulp=require("gulp"),
    spritesmith=require('gulp.spritesmith');

gulp.task('default', function () {
    return gulp.src('images/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: 'sprite.png',//保存合并后图片的地址
            cssName: 'css/sprite.css',//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: 'binary-tree',//注释1
            cssTemplate:"css/handlebarsStr.css"//注释2
        }))
        .pipe(gulp.dest('dist/'));
});