以往在写代码的过程中，脚本都是未经过压缩和精简格式化的，这样页面加载脚本及样式文件的时间会随着文件的大小而加长，在grunt,gulp，之间我选择了gulp，因为gulp配置起来非常简单容易上手。webpack又过于复杂，学习起来需要花费不少时间，所以先掌握gulp再来掌握webpack.

1. gulpfile.js (任务文件)

2. gulpfile_dev.js （测试环境-仅copy使用）

3. gulpfile_pro.js（发布环境-主要用于代码压缩及样式缩减和其他功能）

4. config.json（路径及属性配置）

//主文件-gulpfile
var gulp = require('gulp');
var dev_gulp = require('./gulpfile_dev');
var pro_gulp = require('./gulpfile_pro');
console.log("发布环境：开发,端口：85");
//发布开发环境
 gulp.task("run_dev", function () {
    dev_gulp.runDev.cssMin();
    dev_gulp.runDev.imgMin();
    dev_gulp.runDev.html();
    dev_gulp.runDev.uglifyScript();
    console.log("发布环境：开发,端口：85");
 });
 //发布测试环境
 gulp.task("run_pro", function () {
     pro_gulp.runPro.cssMin();
     pro_gulp.runPro.imgMin();
     pro_gulp.runPro.html();
     pro_gulp.runPro.uglifyScript();
     console.log("发布环境：测试,端口：86");
 });

 //监视文件变化
 gulp.task('watch', function () {
     gulp.watch(['./scripts/!**!/!*.js', '!./build/!**!/!*.js'], ['run_dev_uglify']);
     gulp.watch(['./!**!/!*.html', '!./build/!**!/!*.html'], ['run_dev_html']);
     gulp.watch(['./styles/!**!/!*.css', '!./build/!**!/!*.css'], ['run_dev_css']);
 });
 // 启用热更新
 gulp.task('server', function () {
     connect.server({
         port: 8888
     });
 });
// 执行任务
gulp.task("default", ['watch', 'server']);

//开发环境-gulp-dev 仅用于将文件发布到测试环境并未做任务gulp任务，相当于copy功能。
var gulp = require('gulp');
var clean = require('gulp-clean');
var ejs = require("gulp-ejs");
var ext_replace = require('gulp-ext-replace');
var config = require('./config.json');
runDev = {
    cssMin: function () {
        gulp.src(config.css.src).pipe(gulp.dest(config.css.dest_dev));
    },
    imgMin: function () {
        gulp.src(config.img.src).pipe(gulp.dest(config.img.dest_dev));
    },
    uglifyScript: function () {
        gulp.src(config.js.src).pipe(gulp.dest(config.js.dest_dev));
    },
    html: function () {
        gulp.src(config.html.src).pipe(ejs({})).pipe(gulp.dest(config.html.dest_dev));
    }
};
module.exports.runDev = runDev;

//gulp-pro 用于发布环境，代码压缩，样式压缩等。
var gulp = require('gulp');
var header = require('gulp-header');
var clean = require('gulp-clean');
var ejs = require("gulp-ejs");
var uglify = require('gulp-uglify');
var ext_replace = require('gulp-ext-replace');
var cssmin = require('gulp-cssmin');
var imagemin = require('gulp-imagemin');
var base64 = require('gulp-base64');
var htmlmin = require('gulp-htmlmin');
var config = require('./config.json');
var banner = "/** \n\* By Benjamin\n\*/\n";
runPro = {
    clean: function () {
        console.log('clear nothing.');
    },
    uglifyScript: function () {
        gulp.src(config.js.src).pipe(header(banner)).pipe(uglify()).pipe(ext_replace('.min.js')).pipe(gulp.dest(config.js.dest_pro));
    },
    cssMin: function () {
        gulp.src(config.css.src).pipe(cssmin()).pipe(header(banner)).pipe(base64()).pipe(ext_replace('.min.css')).pipe(gulp.dest(config.css.dest_pro));
    },
    imgMin: function () {
        gulp.src(config.img.src).pipe(imagemin()).pipe(gulp.dest(config.img.dest_pro));
    },
    html: function () {
        gulp.src(config.html.src).pipe(ejs({})).pipe(htmlmin(config.html.option)).pipe(gulp.dest(config.html.dest_pro));
    },
    copy: function () {
        gulp.src(config.copy.src_css).pipe(ext_replace('.min.css')).pipe(gulp.dest(config.css.dest_pro));
        gulp.src(config.copy.src_util_js).pipe(ext_replace('.min.js')).pipe(gulp.dest(config.copy.dest_pro_utils));
        gulp.src(config.copy.src_lib_js).pipe(ext_replace('.min.js')).pipe(gulp.dest(config.copy.dest_pro_lib));
    }
};
module.exports.runPro = runPro;

//config.json用于配置路径
{
  "js": {
    "src": [
      "./static/scripts/**/*.js"
    ],
    "dest_dev": "./build/static/scripts/",
    "dest_pro": "../crm_publish/static/scripts/"
  },
  "html": {
    "src": [
      "./views/**/*.html",
      "!./views/includes/*.html"
    ],
    "option": {
      "removeComments": true,
      "collapseWhitespace": true,
      "removeEmptyAttributes": true,
      "removeScriptTypeAttributes": true,
      "removeStyleLinkTypeAttributes": true,
      "minifyJS": false,
      "minifyCSS": false
    },
    "dest_dev": "./build/",
    "dest_pro": "../crm_publish/"
  },
  "img": {
    "src": [
      "./static/images/**/*"
    ],
    "dest_dev": "./build/static/images/",
    "dest_pro": "../crm_publish/static/images/"
  },
  "css": {
    "src": [
      "./static/style/**/*.css"
    ],
    "dest_dev": "./build/static/style/",
    "dest_pro": "../crm_publish/static/style/"
  }
}