gulp配置文件

package.json:

{  "name": "og-web20171010",  "version": "1.0.0",  "description": "20171010",  "main": "gulpfile.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "tangcc",  "license": "ISC",  "devDependencies": {    "browser-sync": "^2.18.13",    "browsersync-ssi": "^0.2.4",    "gulp": "^3.9.1",    "gulp-autoprefixer": "^4.0.0",    "gulp-clean": "^0.3.2",    "gulp-clean-css": "^3.9.0",    "gulp-compass": "^2.1.0",    "gulp-concat": "^2.6.1",    "gulp-copy": "^1.0.1",    "gulp-filter": "^5.0.1",    "gulp-minify": "^1.0.0",    "gulp-plumber": "^1.1.0",    "gulp-rev": "^8.0.0",    "gulp-rev-collector": "^1.2.2",    "gulp-run-sequence": "^0.3.2",    "gulp-sass": "^3.1.0",    "gulp-sourcemaps": "^2.6.1",    "gulp-uglify": "^3.0.0",    "gulp-zip": "^4.0.0"  }}

gulpfile.js:

//使用严格模式的js。保证js的严谨，作为一个好习惯。'use strict';var appDir = './app';//源码目录//var destDir = 'D:\\og_web-html\\src\\main\\webapp';//编译后目录var destDir = "D:\\oghtml";//编译后目录//var destDir = './dist';//编译后目录var gulp = require("gulp"),sourcemaps = require('gulp-sourcemaps');//映射文件//多浏览器多设备同步&自动刷新var browserSync = require("browser-sync").create(),  SSI  =  require('browsersync-ssi'),  filter  =  require('gulp-filter'),  //用来编译sass  sass  =  require('gulp-sass'),  cssAutoprefixer = require('gulp-autoprefixer'),  cleanCSS = require('gulp-clean-css'),//压缩css  rev = require("gulp-rev"),  revCollector=require('gulp-rev-collector'),  // 需要ruby 不用了 compass = require('gulp-compass'),  //合并文件  concat = require('gulp-concat'),  //混淆js压缩  uglify = require('gulp-uglify'),  //压缩js  minify = require('gulp-minify'),  //错误处理插件plumber  plumber = require('gulp-plumber'),  //clean 用来删除文件  clean = require('gulp-clean'),  //压缩文件  zip = require('gulp-zip'),  filesCopy = require("gulp-copy"), //可以把固定的文件复制到目标文件夹中去  runSequence = require('gulp-run-sequence');////////////////////////////////////////////////// server ///////////////////////////////////////////////////////////////////////创建一个名为serve的任务，该任务的内容就是匿名函数中的内容。gulp.task('serve', function() {  browserSync.init({    //files:['**'],    //port:8080, // 指定访问服务器的端口号    server: {      baseDir:destDir      // middleware:SSI({      //   baseDir:destDir,// 设置静态服务器的根目录      //   ext:'.shtml',      //   version:'1.0',      //   //index:'index.html' // 指定默认打开的文件      // })    }  });  //监听各个目录的文件，如果有变动则执行相应的任务操作文件  gulp.watch("app/sass/**/*.scss", ['sass']);  gulp.watch("app/js/**/*.js", ['js']);  gulp.watch("app/css/**/*.css", ['css']);  gulp.watch("app/lib/**/**.**", ['lib']);  gulp.watch("app/iframe/**/*.html", ['iframe']);  gulp.watch("app/img/**.**", ['img']);  gulp.watch("app/html/**/*.html", ['html']);  gulp.watch("app/index.html", ['index']);  //如果有任何文件变动，自动刷新浏览器  gulp.watch("app/**/*.html").on("change",browserSync.reload);});//监听各个目录的文件，如果有变动则执行相应的任务操作文件gulp.watch("app/sass/**/*.scss", ['sass']);gulp.watch("app/js/**/*.js", ['js']);gulp.watch("app/css/**/*.css", ['css']);gulp.watch("app/iframe/**/*.html", ['iframe']);gulp.watch("app/img/**.**", ['img']);gulp.watch("app/html/**/*.html", ['html']);gulp.watch("app/index.html", ['index']);gulp.watch("app/lib/**/**.**", ['lib']);//如果有任何文件变动，自动刷新浏览器gulp.watch("app/**/*.html").on("change",browserSync.reload);// 代理的形式 proxy// gulp.task('serve', function() {//   //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）//   browserSync.init({//     proxy: "127.0.0.1:8080"//   });//   //监听各个目录的文件，如果有变动则执行相应的任务操作文件//   gulp.watch("app/sass/**/*.scss", ['sass']);//   gulp.watch("app/js/**/*.js", ['js']);//   gulp.watch("app/css/**/*.css", ['css']);//   gulp.watch("app/iframe/**/*.html", ['iframe']);//   gulp.watch("app/img/**.**", ['img']);//   gulp.watch("app/html/**/*.html", ['html']);//   gulp.watch("app/index.html", ['index']);//   gulp.watch("app/lib/**/**.**", ['lib']);//   //如果有任何文件变动，自动刷新浏览器//   gulp.watch("app/**/*.html").on("change",browserSync.reload);// });//下面来分别看看处理各个部分的任务：//compass任务，将scss编译为cssgulp.task('sass', function() {  //首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）  return gulp.src('app/sass/**/*.scss')    .pipe(sass({      //设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试      sourcemap: 'true',      //输出格式设置为compressed就不需要压缩css了      style: 'compressed',      //文件目录      css: 'app/css',      sass: 'app/sass',      image: 'app/img'    }))    //如果有错误输出错误提示    .on('error', function(error) {      // Would like to catch the error here      console.log(error);      this.emit('end');    })    .pipe(gulp.dest('app/css'))    //自动刷新浏览器    .pipe(browserSync.stream());});//cssgulp.task('css', function() {  return gulp.src(["app/css/**/*.css"])    .pipe(plumber())    .pipe(gulp.dest(destDir+"/css"))    .pipe(browserSync.stream());});//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行gulp.task('js', function(){  //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）  return gulp.src('app/js/**/*.js')  //错误管理模块    .pipe(plumber())    //.pipe(uglify())    //js压缩    //.pipe(minify())    .pipe(gulp.dest(destDir+"/js"))    //自动刷新浏览器    .pipe(browserSync.stream());});//html任务gulp.task('html', function() {  return gulp.src(["app/html/**/*.html"])    .pipe(plumber())    .pipe(gulp.dest(destDir + "/html"))    .pipe(browserSync.stream());});//index.html任务gulp.task('index', function() {  return gulp.src(["app/index.html"])    .pipe(plumber())    .pipe(gulp.dest(destDir + "/"))    .pipe(browserSync.stream());});//copy iframe任务gulp.task('iframe', function() {  return gulp.src("app/iframe/**/*.html")    .pipe(plumber())    .pipe(gulp.dest(destDir + "/iframe"))    .pipe(browserSync.stream());});//copy imggulp.task('img', function() {  return gulp.src("app/img/**/*.*")    .pipe(plumber())    .pipe(gulp.dest(destDir + "/img"))    .pipe(browserSync.stream());});//copy libgulp.task('lib', function() {  return gulp.src("app/lib/**/*.*")    .pipe(plumber())    .pipe(gulp.dest(destDir+"/lib"))    .pipe(browserSync.stream());});//clean任务：清空dist文件夹，下边重建dist的时候使用gulp.task('clean', function () {  return gulp.src( [destDir + '/*','!WEB-INF/**/*.*'] ,{read: false})    .pipe(clean({force: true}));});//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件gulp.task('redist',function(){  //先运行clean，然后并行运行html,js,compass  runSequence('clean',['html','js','iframe','img','lib','index','css']);});//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会gulp.task('default', function(){  //先运行redist，再启动服务器  runSequence('redist','serve');});////////////////////////////////////////////////// publish ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// publish /////////////////////////////////////////////////////////////////////创建一个名为publish serve的任务，该任务的内容就是匿名函数中的内容。gulp.task('serve-release', function() {  //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）  browserSync.init({    //files:['**'],    //port:"8080", // 指定访问服务器的端口号    server: {      baseDir:destDir      // middleware:SSI({      //   baseDir:destDir,// 设置静态服务器的根目录      //   ext:'.shtml',      //   version:'1.0',      //   //index:'index.html' // 指定默认打开的文件      // })    }  });  //监听各个目录的文件，如果有变动则执行相应的任务操作文件  gulp.watch("app/sass/**/*.scss", ['sass-release']);  gulp.watch("app/lib/**/**.**", ['lib-release']);  gulp.watch("app/css/**/*.css", ['css-release']);  gulp.watch("app/js/**/*.js", ['js-release']);  gulp.watch("app/img/**.**", ['img-release']);  gulp.watch("app/html/**/*.html", ['html-collector-release']);  gulp.watch("app/iframe/**/*.html", ['iframe-collector-release']);  gulp.watch("app/index.html", ['index-collector-release']);  //如果有任何文件变动，自动刷新浏览器  gulp.watch("app/**/*.html").on("change",browserSync.reload);});// 代理的形式 proxy// gulp.task('serve', function() {//   //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）//   browserSync.init({//     proxy: "127.0.0.1:8080"//   });//   //监听各个目录的文件，如果有变动则执行相应的任务操作文件      //各种watch略// });//下面来分别看看处理各个部分的任务：//compass任务，将scss编译为cssgulp.task('sass-release', function() {  //首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）  return gulp.src('app/sass/**/*.scss')    .pipe(sass({      //设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试      sourcemap: 'true',      //输出格式设置为compressed就不需要压缩css了      style: 'compressed',      //文件目录      css: 'app/css',      sass: 'app/sass',      image: 'app/img'    }))    //如果有错误输出错误提示    .on('error', function(error) {      // Would like to catch the error here      console.log(error);      this.emit('end');    })    .pipe(gulp.dest('app/css'))    //自动刷新浏览器    .pipe(browserSync.stream());});//css-releasegulp.task('css-release', function() {  return gulp.src(["app/css/**/*.css"])    .pipe(plumber())    .pipe(cssAutoprefixer())    .pipe(cleanCSS())    .pipe(rev())    .pipe(gulp.dest(destDir + "/css"))    .pipe(rev.manifest())    .pipe(gulp.dest(appDir + '/revCssJson'));});//jsRev-release任务，将jsRev-release压缩后放入dist。该任务要在clean-scripts任务完成后再执行gulp.task('js-release', function(){  //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）  return gulp.src(['app/js/**/*.js'])  //错误管理模块    .pipe(plumber())    .pipe(uglify())    //js压缩    .pipe(minify())    .pipe(rev())    .pipe(gulp.dest(destDir+"/js"))    .pipe(rev.manifest())    .pipe(gulp.dest(appDir + '/jsRevJson'));});gulp.task('img-release',function(){  gulp.src([appDir + '/img/*'])    .pipe(plumber())    .pipe(rev())    .pipe(gulp.dest(destDir + '/img'))    .pipe(rev.manifest())    .pipe(gulp.dest(appDir + '/imgRevJson'));});gulp.task('html-collector-release',function(){  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir+'/html/**/*.html'])    .pipe(revCollector())    .pipe(gulp.dest(destDir + '/html'));})gulp.task('iframe-collector-release',function(){  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir+'/iframe/**/*.html'])    .pipe(revCollector())    .pipe(gulp.dest(destDir + '/iframe'));})gulp.task('index-collector-release',function(){  gulp.src([appDir + '/jsRevJson/*',appDir + '/revCssJson/*',appDir + '/imgRevJson/*',appDir + '/index.html'])    .pipe(revCollector())    .pipe(gulp.dest(destDir + '/'));})//copy libgulp.task('lib-release', function() {  return gulp.src("app/lib/**/*.*")    .pipe(plumber())    .pipe(gulp.dest(destDir+"/lib"))    .pipe(browserSync.stream());});//clean任务：清空dist文件夹，下边重建dist的时候使用gulp.task('clean-release', function () {  return gulp.src( [destDir + '/*','!WEB-INF/**/*.*'] ,{read: false})    .pipe(clean({force: true}));});//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件gulp.task('redist-release',function(){  //先运行clean，然后并行运行html,js,compass  runSequence('clean-release',['sass-release','lib-release','css-release','js-release','img-release','html-collector-release','iframe-collector-release','index-collector-release']);});//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会gulp.task('default-release', function(){  //先运行redist，再启动服务器  runSequence('redist-release','serve-release');});