gulp自動化方案
阿新 • • 發佈：2018-01-03
write 2.4 pac fig .json ssm pos file 信息
這個自動化方案主要包括以下功能：
-
編譯less,壓縮編譯後的css,重命名文件,合並打包css文件
-
編譯es6,壓縮編譯後的js,將公共引入的第三方類庫整體打包
-
監聽文件變化,自動化執行編譯任務
-
執行靜態代碼檢查包括
stylelint/htmlcs/eslint
主要功能就是以上這些，下面是gulpfile.js的配置:
/** * Created by [email protected] 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": "[email protected]", "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" } }
來自：https://segmentfault.com/a/1190000010138466
gulp自動化方案