更多插件安裝使用示例以下：
在本地文件夾下載插件：npm install 插件名 --save-dev
var gulp = require("gulp");//導入glup var sass = require("gulp-sass");//拷貝並編譯scss var server = require("gulp-connect");//創建服務器 var concat = require("gulp-concat");//合併js文件 var uglify = require("gulp-uglify");//壓縮js文件 var minifyCss = require("gulp-minify-css");//壓縮css var imagemin = require("gulp-imagemin");//壓縮圖片 var rename = require("gulp-rename");//文件重命名 var rev = require("gulp-rev");//給靜態資源文件名添加一個哈希值後綴 var revCollector = require("gulp-rev-collector");//自動添加版本號 var autoprefixer = require("gulp-autoprefixer");//對css添加瀏覽器後綴 var htmlmin = require("gulp-htmlmin");//對html頁面進行壓縮
//基本語法 Gulp.task(「任務名稱」，執行行數（）{ Return gulp.src(「操做的文件路徑」).pipe(插件名【與var定義名字相同】）{ 相關參數 })）【可執行操做多個pipe（）處理項】.pipe(gulp.dest(「返回結果的路徑」)) })；
gulp.task("addpre",function () {
return gulp.src("src/css/aa.css").pipe(autoprefixer({
browsers:['last 2 versions','Android>=4.0'],
cascade:true
})).pipe(gulp.dest("dist/css"))
})
//同時執行多項任務gulp.task(「合併的任務名」,[「任務1」,」任務2」,」任務3」,...]);
gulp.task("default",["copyindex","copy-img","copy-data"]);
<!--將src下的index頁面進行壓縮後拷貝到dist目錄下-->
gulp.task("copyindex",function () {
return gulp.src("src/index.html").pipe(htmlmin({
minifyCss:true,//壓縮css
minifyJS:true,//壓縮js
removeComment:true,//壓縮代碼
collapseWhitespace:true//壓縮空白區域
})).pipe(gulp.dest("dist/"))
})
//批量拷貝
// src/images/**/*拷貝images下的全部文件下的全部資源
gulp.task("copy-img",function () {
return gulp.src("src/images/**/*").pipe(imagemin()).pipe(gulp.dest("dist/images/"));
})
//多組拷貝和合並"!src/json/s-*.json"//排除s開頭的json文件
//！文件名 表示排除
gulp.task("copy-data",function () {
return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]).pipe(gulp.dest("dist/data/"));
})
//編譯scss並拷貝到相關路徑
gulp.task("scss-c",function () {
return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css/"));
})
//watch監控數據，一旦文件，當即執行監視任務進行拷貝刷新
gulp.task("watch",function () {
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copy-img"]);
gulp.watch("src/json/*",["copy-data"]);
})
//創建本地服務器
gulp.task("server",function () {
server.server({
root:"dist"
});
})
//js合併 與 .pipe(uglify())壓縮
gulp.task("js",function () {
return gulp.src("src/script**/*").pipe(concat("all.js")).pipe(uglify()).pipe(gulp.dest("dist/js/")).pipe(rename("all-min.js")).pipe(gulp.dest("dist/js/"))
})
//對css進行壓縮並建立json文件自動添加版本號
gulp.task("css",function () {
return gulp.src("src/css/*.css").pipe(minifyCss()).pipe(rev()).pipe(gulp.dest("dist/css/")).pipe(rev.manifest()).pipe(gulp.dest("dist/css/"));
});
//用來替換HTML頁面上的link標籤src路徑（方便更改文件名）
gulp.task("rev-collector",function () {
return gulp.src(["dist/css/**/*.json","dist/index.html"]).pipe(revCollector({
replaceReved:true,
})).pipe(gulp.dest("dist/"))
});