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"
}