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