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

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

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

編譯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',
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());
//格式化css檔案
gulp.task('css',['less'],function());
//編譯es6
gulp.task('js',function()))
.pipe(rename())
.pipe(uglify())
.pipe(gulp.dest(jsdest))
});//  引入部分
gulp.task('browserify', ['js'],function () )
.transform(babelify.configure());
return b.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('../assets/js'))
.pipe(notify());
});/**
*      靜態**檢查部分
* */
gulp.task('csscheck', function() ))
// 按照規則check**
.pipe(stylelint(,
]}));
});gulp.task('htmlcheck', function() ,]})
);});gulp.task('jseslint', function() ))
.pipe(eslint.format('checkstyle',fs.createwritestream('reports/'+checkstylexml)));
});/**
*  監聽編譯部分
* */
gulp.task('watch',function());
//開發完畢打包
gulp.task('run', ['css', 'browserify']);
//自檢
gulp.task('checkstyle',['csscheck','htmlcheck','jseslint']);

接下來是package.json的資訊：

,
"author": "[email protected]",
"license": "isc",
"devdependencies": 
}

ps:關於靜態**檢查的配置檔案和說明檔案，請檢視github上的config資料夾

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化工程化自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...

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

基於gulp的前端自動化方案

基於gulp的前端自動化方案

基於gulp的前端自動化方案

相關推薦