1 var gulp = require("gulp"); //gulp核心模块 2 var sass = require("gulp-sass"); //sass编译 3 var server = require("gulp-connect"); //服务器 4 var concat = require("gulp-concat"); //合并 5 var uglify = require("gulp-uglify"); //压缩 6 var minifyCss = require("gulp-minify-css"); //css压缩 7 var imgmin = require("gulp-imagemin"); //图片压缩 8 var rename = require("gulp-rename"); //对文件进行重命名 9 var rev = require("gulp-rev"); //给静态资源添加上一个hash值后缀 10 var revCollector = require("gulp-rev-collector"); //根据rev生成manifest用来替换html link 11 var prefixer = require("gulp-autoprefixer"); //自动添加浏览器厂商前缀 12 var htmlmin = require("gulp-htmlmin"); //对页面进行压缩 13 14 gulp.task("default",["copyindex","copy-img","copy-data"]); 15 16 //根据rev-manifest对link路径进行替换 17 gulp.task("rev-collector",function(){ 18 return gulp.src(["dist/css/**/*.json","dist/index.html"]) 19 .pipe(revCollector({ 20 replaceReved: true, 21 })) 22 .pipe(gulp.dest("dist/")) 23 24 }) 25 gulp.task("addPrx",function(){ 26 return gulp.src("src/css2/*.css") 27 .pipe(prefixer({ 28 browsers: ['last 2 versions', 'Android >= 4.0'], 29 cascade: true, //是否美化属性值 默认：true 像这样： 30 remove:true //是否去掉不必要的前缀 默认：true 31 })) 32 .pipe(gulp.dest("dist/css/")) 33 }) 34 35 //创建服务器 36 gulp.task("server",function(){ 37 server.server({ 38 root:"dist" 39 }) 40 }) 41 //js 合并 42 gulp.task("js",function(){ 43 return gulp.src("src/js/**/*") 44 .pipe(concat("all.js")) 45 .pipe(gulp.dest("dist/js/")) 46 }); 47 //合并与压缩 48 gulp.task("js-c",function(){ 49 return gulp.src("src/script/**/*") 50 .pipe(concat("all-c.js")) 51 .pipe(gulp.dest("dist/js/")) 52 .pipe(uglify()) 53 .pipe(rename("all-c-min.js")) 54 .pipe(gulp.dest("dist/js/")) 55 }); 56 57 //对css文件进行压缩 58 gulp.task("css",function(){ 59 return gulp.src("src/css/*.css") 60 .pipe(minifyCss()) 61 .pipe(gulp.dest("dist/css/")) 62 .pipe(rev()) 63 .pipe(gulp.dest("dist/css/")) 64 .pipe(rev.manifest()) 65 .pipe(gulp.dest("dist/css/")) 66 }) //gulp.task("copyindex",function(){ 71 return gulp.src("src/index.html") 72 .pipe(htmlmin({ 73 minifyCSS:true, 74 minifyJS:true, 75 removeComments:true, 76 collapseWhitespace:true 77 })) 78 .pipe(gulp.dest("dist/")) 79 }) 80 81 //批量copy 82 gulp.task("copy-img",function(){ 83 return gulp.src("src/images/**/*") 84 .pipe(imgmin()) 85 .pipe(gulp.dest("dist/images/")) 86 }) 87 88 //多组文件的操作 89 gulp.task("copy-data",function(){ 90 return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]) 91 .pipe(gulp.dest("dist/data/")); 92 }) 93 94 gulp.task("sass-c",function(){ 95 return gulp.src("src/scss/**/*.scss") 96 .pipe(sass()) 97 98 .pipe(gulp.dest("dist/css/")) 99 }) 100 101 //watch 102 gulp.task("watch",function(){ 103 gulp.watch("src/index.html",["copyindex"]); 104 gulp.watch("src/images/**/*",["copy-img"]); 105 gulp.watch(["src/json/*","src/xml/*"],["copy-data"]); 106 107 })

使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task 　　　　　found”，选择右键”Reload tasks”，双击运行即可。

　本文有任何错误，或有任何疑问，欢迎留言说明！