gulp打包普通html项目

说明：支持配置config输入目录 以及输出目录
支持hash css js image（有动态更换本地图片路径时不建议使用hash）
支持合并css js 目前暂不支持合并后js路径自动替换
支持自动替换html 引用文件路径
...*min.* 不参与压缩&&hash

gulpfile.js代码如下：

var gulp         = require('gulp'),
    gulpIgnore   = require('gulp-ignore'),
    order        = require('gulp-order'),
    gulpif       = require('gulp-if'),
    clean        = require('gulp-clean'),
    uglify       = require('gulp-uglify'),
    concat       = require('gulp-concat'),
    rev          = require('gulp-rev'),
    cssmin       = require('gulp-mini-css'),
    imagemin     = require('gulp-imagemin'),
    htmlreplace  = require('gulp-html-replace'),
    minifyHTML   = require('gulp-minify-html'),
    htmlmin      = require('gulp-htmlmin'),
    revCollector = require("gulp-rev-collector"),
    replace      = require('gulp-replace'),
    rename      = require('gulp-rename'),
    pump         = require('pump'),
    sequence     = require('run-sequence');
var config = {
    src: "redbag", // 输入目录
    src_css: 'css', // 输入css所在文件夹
    src_js: 'js', // 输入js所在文件夹
    dist: "dist", // 输出目录
    dist_css: 'css', // 输出css文件存放文件夹 为空则在根目录下
    dist_js: 'js', // 输出js文件存放文件夹 为空则在根目录下
    css_min_name: 'main.min.css', // 压缩后js
    js_min_name: 'main.min.js', // 压缩后css
    css_sort: ['common.css','main.css'], // 当前css引用顺序 后面合并会依照此排序
    // 当前js引用顺序 后面合并会依照此排序
    js_sort: ['zepto.min.js', 'track.js', 'sa.hb.js', 'common.js', 'main.js', 'rule.js']
}

var addMinFile = function (arr,folder) {
    for(var i=0;i<arr.length;i++){
       arr[i] = config.src+'/'+folder+'/'+arr[i];
    }
    return arr;
}
config.js_sort = addMinFile(config.js_sort,config.src_js)
config.js_sort.push('!'+config.src+'/**/*min.js')
config.css_sort = addMinFile(config.css_sort,config.src_css)
config.css_sort.push('!'+config.src+'/**/*min.css')

//
/**
 * 清理目标目录
 */
gulp.task('clean', function(cb) {
    pump([
        gulp.src(config.dist),
        clean()
    ], cb)
})

/**
 * 执行JS压缩
 */
gulp.task('minify:js', function () {
    gulp.src(config.js_sort)
        // .pipe(order(addMinFile(config.js_sort,'js'), {base:'./'}))
        .pipe(concat(config.js_min_name))//合并 config.js_min_name
        .pipe(uglify())//压缩
        // .pipe(rename())
        .pipe(rev())
        .pipe(gulp.dest(config.dist+'/'+config.dist_js))
        .pipe(rev.manifest())
        .pipe(gulp.dest(config.dist+'/'+config.dist_js))
});

// 将未参与压缩的文件复制到dist/js下
gulp.task('copyJs', function(){
    return gulp.src([config.src+'/**/*.min.js'])
        .pipe(gulp.dest(config.dist));
    }
);

//压缩css
gulp.task('cssmin:css', function(){
    return gulp.src(config.css_sort)
        .pipe(concat(config.css_min_name))
        .pipe(cssmin())
        // .pipe(rev())
        // .pipe(gulp.dest(config.dist))
        // .pipe(rev.manifest())
        .pipe(gulp.dest(config.dist+'/'+config.dist_css));
});


// 将未参与压缩的文件复制到dist/CSS下
gulp.task('copyCss', function(){
    return gulp.src([config.src+'/**/*.min.css'])
        .pipe(gulp.dest(config.dist));
    }
);

//压缩图片---无动态更改图片路径 可以使用hash
// gulp.task('imagemin:image', function(){
//     return gulp.src(config.src+'/**/img/**/*')
//         .pipe(imagemin())
//         .pipe(rev())
//         .pipe(gulp.dest(config.dist))
//         .pipe(rev.manifest())
//         .pipe(gulp.dest(config.dist+'/img'));
// });

//压缩图片---有动态更改图片路径
gulp.task('imagemin:image', function(){
    return gulp.src(config.src+'/**/img/**/*')
        .pipe(gulp.dest(config.dist))
});

gulp.task('html-replace',function() {
    console.log(config.dist+'/'+config.dist_js+'/*.json')
  console.log(gulp.src(config.dist+'/'+config.dist_js+'/*.json'));
  return gulp.src(config.src+'/*.html')
    .pipe(htmlreplace({
        // 'js': 'js/'+config.js_min_name,
        'js': config.dist_js+'/**-**.min.js',
        // 'js': config.dist_js + gulp.src([config.dist+'/**/*.json']).config.js_min_name,
        'css': 'css/'+config.css_min_name
    }))
    .pipe(gulp.dest(config.dist));
});

gulp.task('htmlmin:html', function(){
    return gulp.src(config.src+'/*.html')
           .pipe(htmlmin({collaspseWhiteSpace:true}))
           .pipe(gulp.dest(config.dist));
});

//Html替换css、js文件版本
gulp.task('rev-collector', function () {
    return gulp.src([config.dist+'/**/*.json', config.dist+'/**/*.html'])
    .pipe(revCollector({
        replaceReved: true
    }))
    .pipe(gulp.dest(config.dist));
});


// 将其他文件or文件夹移动到目标目录
gulp.task('mvNotDealAsset', function () {
    return gulp.src([config.src+'/.*','!'+config.src+'**/*.css', '!'+config.src+'**/*.js'])
    .pipe(gulp.dest(config.dist));
});

/**
/**
 * 监听JS文件变改，即时调用任务执行JS增量打包
 */
 gulp.task('watch', function () {
    gulp.watch(config.src+'/**/*.js',['minjs']);//监听src/css/下的全部.js文件，若有改动则执行名为'minjs'任务
});

 /**
 * 监听CSS文件变改，即时调用任务执行JS增量打包
 */
 gulp.task('watch', function () {
    gulp.watch(config.src+'/**/*.css',['mincss']);//监听src/css/下的全部.js文件，若有改动则执行名为'mincss'任务
});

/**
 * 开始执行
 */
gulp.task('default', function(cb) {
    sequence('clean', 'minify:js', 'copyJs', 'cssmin:css','copyCss', 'imagemin:image', 'rev-collector','html-replace', 'watch', cb);
});

package.json文件配置如下：

{
  "name": "demo",
  "version": "3.5.6",
  "description": "gulp-demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp gulpfile.js"
  },
  "author": "---",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-html-replace": "^1.6.2",
    "gulp-minify": "0.0.15",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.1.2"
  },
  "dependencies": {
    "gulp-changed": "^3.2.0",
    "gulp-htmlmin": "^4.0.0",
    "gulp-if": "^2.0.2",
    "gulp-ignore": "^2.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-mini-css": "0.0.3",
    "gulp-minify-html": "^1.0.6",
    "gulp-order": "^1.1.1",
    "gulp-sourcemaps": "^2.6.4",
    "pump": "^3.0.0",
    "run-sequence": "^2.2.1"
  }
}

打包命令： 输入gulp 然后回车