整理配置的一套gulp自動化方案

最近給公司前端開發配置了一套基於gulp的自動化框架，目前是1.0版本。本人能力有限，這個方案的主要面相方向是小前端團隊;還在使用jQuery.js等類庫開發的項目使用。

那麼這個自動化方案主要包括如下功能：

1. 編譯less,壓縮編譯後的css,重命名文件,合併打包css文件

2. 編譯es6,壓縮編譯後的js,將公共引入的第三方類庫總體打包

3. 監聽文件變化,自動化執行編譯任務

4. 執行靜態代碼檢查包括stylelint/htmlcs/eslint

主要功能就是以上這些，下面是gulpfile.js的配置:

/**
 * Created by syzx9801@163.com on 2017/7/4.
 */
//路徑信息
var cssDest = '../assets/css',
    lessSrc = '../assets/css/*.less',
    cssSrc = '../assets/css/*.css',
    jsSrc = '../assets/js/demo/*.js',
    jsDest = '../assets/js/demo',
    appjs = '../assets/js/demo/app.js'
    htmlSrc = '../html/**/*.html';

//引用包
var gulp = require('gulp'),
    less = require('gulp-less'),
    cssmin = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    es2015 = require('babel-preset-es2015'),
    stylelint = require('gulp-stylelint'),
    stylelfmt = require('gulp-stylefmt'),
    checkStyleFormatter = require('./lib/checkstyle-formatter'),
    htmlcs = require('hny-gulp-htmlcs'),
    errorLevel = require('./config/errlevel'),
    eslint = require('gulp-eslint'),
    fs = require('fs'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    babelify = require('babelify');

/*
*   編譯部分
* **/
//編譯less文件
gulp.task('less',function(){
    gulp.src(lessSrc)
        .pipe(less())
        .pipe(gulp.dest(cssDest))
});
//格式化css文件
gulp.task('css',['less'],function(){
    gulp.src(cssSrc)
        .pipe(cssmin())
        .pipe(concat('main.css'))
        .pipe(gulp.dest(cssDest))
});
//編譯es6
gulp.task('js',function(){
    gulp.src(jsSrc)
        .pipe(babel({
            presets:[es2015]
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(jsDest))
});
//  引入部分
gulp.task('browserify', ['js'],function () {
    var b = browserify({
        entries: appjs,
    })
    .transform(babelify.configure({
        presets: [es2015]
    }));
    return b.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('../assets/js'))
        .pipe(notify({message:'browserify task is success'}));
});

/**
 *      靜態代碼檢查部分
 * */
gulp.task('csscheck', function() {
    var checkstyleXML = 'stylecheck.xml';
    return gulp.src(cssSrc)
        // 按照規則處理代碼
        .pipe(stylelfmt({ configFile: './config/.stylefmtrc' }))
        // 按照規則check代碼
        .pipe(stylelint({
            configFile: './config/.stylelintrc',
            failAfterError: false,
            // 報告路徑
            reportOutputDir: './reports',
            // 輸出結果
            reporters: [
                {formatter: 'verbose', console: true},
                {formatter: checkStyleFormatter, save: checkstyleXML}
            ]
        }));
});

gulp.task('htmlcheck', function() {
    var checkstyleXML = 'htmlcs.xml';
    return gulp.src(htmlSrc)
        .pipe(htmlcs({
                configFile: './config/.htmlcsrc',
                errorLevel: errorLevel,
                failAfterError: false,
                // 報告路徑
                reportOutputDir: './reports',
                // 輸出結果
                reporters: [
                    { formatter: 'verbose',console: true},
                    { formatter: checkStyleFormatter,save: checkstyleXML}
                ]
            })
        );
});

gulp.task('jseslint', function() {
    var checkstyleXML = 'Elint.xml';
    return gulp.src([jsSrc])
        // 按照規則處理代碼
        .pipe(eslint({
            configFile: './config/.eslintrc.json',
            reportOutputDir: './reports'
        }))
        .pipe(eslint.format('checkstyle',fs.createWriteStream('reports/'+checkstyleXML)));
});

/**
 *  監聽編譯部分
 * */
gulp.task('watch',function(){
    gulp.watch(lessSrc,['css']);
    gulp.watch(jsSrc,['browserify']);
});

//開發完畢打包
gulp.task('run', ['css', 'browserify']);
//自檢
gulp.task('checkstyle',['csscheck','htmlcheck','jseslint']);

接下來是package.json的信息：

{
  "name": "gulp-task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gulp run",
    "check": "gulp checkstyle",
    "watch": "gulp watch"
  },
  "author": "syzx9801@163.com",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "globby": "^6.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^3.0.1",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-stylefmt": "^1.0.0",
    "gulp-stylelint": "^3.4.0",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.11",
    "hny-gulp-htmlcs": "^1.0.4",
    "stylelint": "^7.9.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

ps:關於靜態代碼檢查的配置文件和說明文件，請查看github上的config文件夾
Demo的Github地址：[https://github.com/271626514/gulp-demo][1]