下面是自己專案中用到的外掛程式和配置，大部分需要的功能都可以實現，在需要的時候複製貼上改改路徑，儲存下來以後用的到的時候可以找得到。
關於gulp的教程網上有很多。推薦乙個詳細的教程：
var gulp = require('gulp'); // 本地安裝gulp所用到的地方
var fileinclude = require('gulp-file-include'); // 包含html
var connect = require('gulp-connect'); // 本地服務
var imagemin = require('gulp-imagemin'); // 壓縮
var watch = require('gulp-watch'); // 監聽
var less = require('gulp-less'); // 編譯less
var sass = require('gulp-sass'); // 編譯sass
var notify = require('gulp-notify'); // 處理less錯誤
var plumber = require('gulp-plumber'); // 構建異常捕獲，防止構建程序崩掉
var postcss = require('gulp-postcss'); // css 相容
var autoprefixer = require('autoprefixer'); // 處理瀏覽器私有字首
var cssnext = require('cssnext'); // 使用css未來的語法
var precss = require('precss'); // 像sass的函式
var spritesmith = require('gulp.spritesmith'); // 精靈
var browsersync = require('browser-sync');
var reload = browsersync.reload;
var cssbeautify = require('gulp-cssbeautify'); // css 美化
var minifycss = require('gulp-minify-css'); // 壓縮css
var concat = require('gulp-concat'); // 合併檔案
var babel = require('gulp-babel'); // 將es6**編譯成es5
var uglify = require('gulp-uglify'); // 壓縮js
var rename = require('gulp-rename'); // 重新命名檔案
var cached = require('gulp-cached'); // 檔案快取進記憶體
var remember = require('gulp-remember'); // 讀取記憶體中的檔案
var changed = require('gulp-changed'); // 比較檔案改變
var gutil = require('gulp-util'); // 讓電腦 嗶 ~ 的響一聲然後丟擲異常
var debug = require('gulp-debug');
//include html並重新整理伺服器
gulp.task('fileinclude', function(done) ))
.pipe(gulp.dest('dist/html'))
.on('end', done)
.pipe(reload());
});// 建立精靈圖
gulp.task('sprite', function() ));
spritedata.img.pipe(gulp.dest('src/images')); // output path for the sprite
spritedata.css.pipe(gulp.dest('src/css/temp_css/')); // output path for the css
});// 壓縮
gulp.task('imagemin', ['sprite'], function() )))
.pipe(debug())
.pipe(gulp.dest('dist/images'))
.pipe(reload());
return stream;
});// 打包 temp_css 進入到 dist 目錄
gulp.task('csstodist', ['testcss', 'testless', 'testsass', 'sprite'], function() ))
.pipe(postcss(processors))
.pipe(remember('csstodist'))
.pipe(debug())
.pipe(concat('common.css'))
.pipe(cssbeautify())
// .pipe(rename())
// .pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(reload());
return stream;
});// css 打包進入 temp_css 資料夾
gulp.task('testcss', function(callback) ))
.pipe(gulp.dest('src/css/temp_css/'));
// .pipe(reload());
callback();
});// less 翻譯 並 打包進入 temp_css 檔案
gulp.task('testless', function(callback) ))
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('src/css/temp_css/'));
// .pipe(reload());
callback();
});// sass 翻譯 並 打包進入 temp_css 檔案
gulp.task('testsass', function(callback) ))
.pipe(plumber())
// .pipe(sass().on('error', sass.logerror))
.pipe(sass())
.pipe(debug())
.pipe(gulp.dest('src/css/temp_css/'));
// .pipe(reload());
callback();
});// 打包lib進入到dist目錄
gulp.task('libtodist', function() )
.pipe(cached('libtodist'))
.pipe(debug())
.pipe(gulp.dest('dist/lib'))
.pipe(reload());
});// 打包js到dist目錄
gulp.task('jstodist', function()
})).pipe(changed('dist/js', ))
// .pipe(babel())
.pipe(debug())
// .pipe(remember('jstodist'))
// .pipe(concat('public.js'))
// .pipe(rename())
// .pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(reload());
});// 監視檔案改動並重新載入
gulp.task('serve', function()
});});// 監聽所有html js css改動
gulp.task('watch', function() );
gulp.task('default', ['csstodist', 'fileinclude', 'serve', 'imagemin', 'libtodist', 'jstodist', 'watch']);
gulp常用外掛程式
本人就職於一家網際網路小公司，根據自己的專案紀錄一下常用的gulp外掛程式，專案不是很大！文章目錄 1.gulp load plugins 2.yargs 3.del 4.gulp filter 5.gulp header 6.run sequence 7.gulp uglify 8.gulp mi...
gulp常用外掛程式整理
1.gulp sass sass編譯 3.gulp autoprefixer 新增css3字首 4.gulp clean css 壓縮css 5.gulp include 檔案包含 6.gulp concat 檔案合併 7.del 檔案刪除 8.gulp uglify 壓縮js 9.gulp.spr...
gulp常用的外掛程式
首先，來了解下gulp的大概使用流程 首先通過 gulp.src 方法獲取到我們想要處理的檔案流，然後把檔案流通過pipe方法匯入到gulp的外掛程式中，最後把經過外掛程式處理後的流再通過pipe方法匯入到 gulp.dest 中，gulp.dest 方法則把流中的內容寫入到檔案中，這裡首先需要弄清...