Gulp真实项目用例

包括了less预编译，css压缩，html文件include引入，js混淆压缩，本地开发热刷新服务器，html压缩，版本号添加

github地址：

gulpfile.js

var gulp = require('gulp'),                         //基础库
    imagemin = require('gulp-imagemin'),            //图片压缩
    less = require('gulp-less'),                    // less
    minifycss = require('gulp-minify-css'),         //css压缩
    fileinclude  = require('gulp-file-include'),    // 文件包含
    //jshint = require('gulp-jshint'),              //js检查
    uglify  = require('gulp-uglify'),               //js压缩
    rename = require('gulp-rename'),                //重命名
    //concat  = require('gulp-concat'),             //合并文件
    //clean = require('gulp-clean'),                //清空文件夹
    notify = require('gulp-notify'),                // 信息提示
    plumber = require('gulp-plumber'),
    connect = require('gulp-connect'),              //本地开发web服务器，包括实时刷新
    rev = require('gulp-rev'),
    revCollector  = require('gulp-rev-collector'),
    revReplace = require('gulp-rev-replace'),
    minifyHTML = require('gulp-minify-html');

var devDir = 'dist';

/** less编译 **/
gulp.task('less', function () {
    gulp.src('./src/less/mspei.less')
        .pipe(less())
        //.pipe(rename({ suffix: '.min' }))
        //.pipe(minifycss())
        .pipe(gulp.dest('./'+devDir+'/css/'));
});

/** js **/
gulp.task('js', function () {
    gulp.src(['./src/js/**/*'])
        .pipe(gulp.dest('./'+devDir+'/js/'));
});

/** 通用文件包含 **/
gulp.task('fileinclude', function() {
    gulp.src(['./src/views/**/*.html', '!./src/views/include/**.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('./'+devDir+'/'));
});

/** 图片处理 **/
gulp.task('images', function () {
    gulp.src(['./src/images/**/*'])
        .pipe(gulp.dest('./'+devDir+'/images/'));
});

/** 字体图标 **/
gulp.task('fonts', function () {
    gulp.src(['./src/fonts/**/*'])
        .pipe(gulp.dest('./'+devDir+'/fonts/'));
});

/** 使用connect启动一个Web服务器 **/
gulp.task('connect', function () {
    connect.server({
        root: './'+devDir+'/',
        livereload: true
    });
});

/** 刷新页面 **/
gulp.task('reload', function () {
    gulp.src('./'+devDir+'/**/*.html')
        .pipe(connect.reload());
});

/** 监测文件变动，设置自动执行的任务 **/
gulp.task('watch', function () {
    gulp.watch('./src/less/**/*.less', ['less', 'reload']);                   // 当所有less文件发生改变时，调用less任务
    gulp.watch('./src/js/**/*.js', ['js', 'reload']);                   // 当所有js文件发生改变时，调用js任务
    gulp.watch('./src/views/**/*.html', ['fileinclude', 'reload']); // 当所有模板文件变化时，重新生成生成页面到根目录
    gulp.watch('./src/images/**/*', ['images']);                    // 监听images
});

/** 开发时，运行 'gulp dev' **/
gulp.task('dev', ['connect', 'less', 'js', 'fileinclude', 'images', 'fonts', 'reload', 'watch']);



/*****************************************************************
 * dist版本，压缩版
 ****************************************************************/
/** less编译 **/
gulp.task('lessDist', function () {
    gulp.src('./src/less/mspei.less')
        .pipe(less())
        //.pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./src/rev/css'));
});

/** js **/
gulp.task('jsDist', function () {
    gulp.src(['./src/js/**/*', '!./src/js/**/*.js'])
        .pipe(gulp.dest('./dist/js'));
    gulp.src(['./src/js/**/*.js'])
        .pipe(uglify({
            mangle: {except: ['require', 'exports', 'module', '$']}
        }))
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./src/rev/js'));
});

/** 通用文件包含 **/
gulp.task('fileincludeDist', function() {
    gulp.src(['./src/views/**/*.html', '!./src/views/include/*.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('./dist/'));
});

/** 图片处理 **/
gulp.task('imagesDist', function () {
    gulp.src(['./src/images/**/*'])
        .pipe(gulp.dest('./dist/images/'));
});

/** 字体图标 **/
gulp.task('fontsDist', function () {
    gulp.src(['./src/fonts/**/*'])
        .pipe(gulp.dest('./dist/fonts/'));
});

gulp.task('commonRev', function () {
    return gulp.src(['src/rev/**/*.json', 'dist/**/*.html'])
        .pipe( revCollector({
            replaceReved: true,
            dirReplacements: {
                'css': 'css',
                'js': 'js',
                //'cdn/': function(manifest_value) {
                //    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                //}
            }
        }) )
        .pipe( minifyHTML({
            empty:true,
            spare:true
        }) )
        .pipe( gulp.dest('dist') );
});


//处理seajs脚本的模块引用
gulp.task("seaRev", function() {
    var jsManifest = gulp.src('./src/rev/js/*.json');

    return gulp.src(["src/js/config.js"], {
            base: "src/js"
        })
        .pipe(revReplace({
            manifest: jsManifest
        }))
        .pipe(rev())
        .pipe(gulp.dest("dist/js"))
        .pipe(rev.manifest("rev-manifest-seajs.json", {
            merge: true
        }))
        .pipe(gulp.dest("src/rev/js"));
});


/** 发布时，运行 'gulp dist' **/
/** 需版本号，再运行 'gulp rev' **/
gulp.task('dist', ['lessDist', 'jsDist', 'fileincludeDist', 'imagesDist', 'fontsDist']);
gulp.task('rev', ['commonRev', 'seaRev']);

 

package.json

{
  "name": "mspei_front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-asset-rev": "^0.0.15",
    "gulp-connect": "^4.1.0",
    "gulp-file-include": "^0.13.7",
    "gulp-imagemin": "^3.0.1",
    "gulp-less": "^3.1.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0",
    "gulp-rev-replace": "^0.4.3",
    "gulp-minify-html": "^1.0.6"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nuanfeng",
  "license": "ISC"
}