百度了一圈，想要在PC端進行ES6開發，都沒有找到相關的腳手架工具。後來想起還有gulp這樣的東西，所以就動手配置了一個關於在gulp進行開發的自動化工具。這份配置檔案包括了，es6、壓縮圖片、編譯less、壓縮css、自動新增版本號，和熱更新的功能。 __注：專案地址： github.com/gentlefung/…這裡有更詳盡的用法
var gulp = require('gulp'),
less = require('gulp-less'),
assetRev = require('gulp-asset-rev'),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
clean = require('gulp-clean'),
pump = require('pump'),
changed = require('gulp-changed'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require("browser-sync").create(),
source = require('vinyl-source-stream'),
sourcemaps = require('gulp-sourcemaps'),
glob = require('glob'),
es = require('event-stream'),
babel = require('gulp-babel'),
browserify = require('browserify');
複製程式碼/* 新增版本號的主要思路是
css新增版本號：
在src目錄下把less檔案編譯成css，壓縮，釋出到dist目錄下。然後給dist目錄下真正生成的css檔案新增hash值。生成的hash檔案在rev目錄下一一對應
最後使用revHtml，html檔案裡面的引入的css新增版本號
js新增版本號：
1、在src目錄下把js檔案 壓縮，es6轉換，釋出到dist目錄下。
2、然後利用browserify將解析後的ES5程式碼合併，轉變成可供瀏覽器識別的import、exprot,之類的方式。其中pages的js檔案是通過識別各種import、export最終生成合並後的js.
（如果我們使用了ES6中的 module，通過 import、export 進行模組化開發，那麼通過babel轉碼後， import 、 export 將被轉碼成符合CMD規範的 require 和 exports 等，但是瀏覽器還是不認識，這時可以使用 bowserify 對程式碼再次進行構建）
3、最後給dist目錄下真正生成的js檔案新增hash值。生成的hash檔案在rev目錄下一一對應
最後使用revHtml，html檔案裡面的引入的js新增版本號
*/
複製程式碼//定義css、js原始檔路徑
var lessSrc = 'src/css/*.less',
cssMinSrc = 'dist/css/*.css',
jsSrc = 'src/js/*.js',
jsMinSrc = 'dist/js/*.js',
//imgMinSrc = 'dist/images/*.{png,jpg,jpeg,gif,ico}', //這是導致無法給圖片新增版本號時所用的路徑
imgSrc = 'src/images/*.{png,jpg,jpeg,gif,ico}', //這是修改後的路徑
htmlSrc = 'src/view/*.html';
/**
處理css
**/
gulp.task('less', function() {
return gulp.src(lessSrc) //該任務針對的檔案
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
// 編譯less
.pipe(less()) //該任務呼叫的模組
.pipe(minifyCss({
compatibility: 'ie7'
})) //壓縮css
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false,
remove: false
}))
.pipe(gulp.dest('dist/css')) //編譯後的路徑
.pipe(browserSync.reload({
stream: true
}));
});
//為css檔案中引入的圖片/字型等新增hash編碼
gulp.task('assetRev', function() {
return gulp.src('dist/css/*.css') //該任務針對的檔案
.pipe(assetRev()) //該任務呼叫的模組
.pipe(gulp.dest('dist/css')); //為css中引入的圖片/字型等新增hash編碼後的路徑
});
//CSS生成檔案hash編碼並生成rev-manifest.json檔名對照對映
gulp.task('revCss', function() {
return gulp.src('dist/css/*.css')
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
.pipe(browserSync.reload({
stream: true
}));
});
/**
處理js
**/
// 壓縮 js 檔案
gulp.task('uglify', function() {
// 1 找到檔案
return gulp.src('src/js/**/*.js')
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
// 生成sourcemaps
.pipe(sourcemaps.init({
loadMaps: true
}))
// 2 轉換es6為es5
.pipe(babel({
presets: ['es2015']
}))
// 3 壓縮檔案
.pipe(uglify({
mangle: false
}))
// 結束sourcemaps
.pipe(sourcemaps.write())
//4 另存壓縮後的檔案
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({
stream: true
}));
})
// 將 轉化成es6,編譯可以供瀏覽器使用的js,這裡主要遍歷了pages頁面下的js檔案。因為所有的這裡的js是最終使用的實際使用的js
gulp.task('browser', function(done) {
// glob為遍歷檔案函式
glob('dist/js/pages/*.js', function(err, files) {
if (err) done(err);
var tasks = files.map(function(entry) {
return browserify({
entries: [entry]
})
.bundle()
.pipe(source(entry))
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
// .pipe(rename({
// extname: '.bundle.js'
// }))
// 這的目錄是相對於‘dist/js/pages/*.js’
.pipe(gulp.dest(''))
.pipe(browserSync.reload({
stream: true
}))
});
es.merge(tasks).on('end', done);
})
});
//js生成檔案hash編碼並生成rev-manifest.json檔名對照對映 目錄結構為dist/js/index.js
gulp.task('revJs', function() {
return gulp.src(jsMinSrc)
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
.pipe(browserSync.reload({
stream: true
}));
});
//js生成檔案hash編碼並生成rev-manifest.json檔名對照對映 目錄結構為dist/js/lib/lib.js
gulp.task('revJs2', function() {
return gulp.src('dist/js/**/*.js')
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
.pipe(browserSync.reload({
stream: true
}));
});
/**
處理圖片
**/
gulp.task('imageMin', function() {
gulp.src('src/images/*.{png,jpg,jpeg,gif,ico}')
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.reload({
stream: true
}));
});
/**
處理html，壓縮
**/
gulp.task('htmlMin', function() {
var options = {
collapseWhitespace: true, //從字面意思應該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大。
collapseBooleanAttributes: true, //省略布林屬性的值，比如：<input checked="checked"/>,那麼設定這個屬性後，就會變成 <input checked/>。
removeComments: true, //清除html中註釋的部分，我們應該減少html頁面中的註釋。
removeEmptyAttributes: true, //清除所有的空屬性。
removeScriptTypeAttributes: true, //清除所有script標籤中的type="text/javascript"屬性。
removeStyleLinkTypeAttributes: true, //清楚所有Link標籤上的type屬性。
minifyJS: true, //壓縮html中的javascript程式碼。
minifyCSS: true //壓縮html中的css程式碼。
};
return gulp.src(htmlSrc)
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/view'))
.pipe(browserSync.reload({
stream: true
}));
});
//Html替換css、js檔案版本,這是
gulp.task('revHtml', function() {
return gulp.src(['rev/**/*.json', 'dist/view/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('dist/view'));
});
/**
刪除任務
**/
gulp.task('clean', function(cb) {
pump([
gulp.src('dist'),
clean()
], cb)
})
// 打包到真的專案中去
gulp.task('build', function(done) {
//condition = false;
runSequence( //此處不能用gulp.run這個最大限度並行(非同步)執行的方法，要用到runSequence這個序列方法(順序執行)才可以在執行gulp後順序執行這些任務並在html中加入版本號
'clean',
'less',
'assetRev',
'revCss',
'uglify',
'browser',//如果不需要es6環境的開發，直接註釋這行就可以，js檔案可以按照不是es6開發編寫
'revJs',
'revJs2',
'imageMin',
'htmlMin',
'revHtml',
done);
});
// 配置給熱更新用，防止過多工，卡死
gulp.task('dev', function(done) {
//condition = false;
runSequence( //此處不能用gulp.run這個最大限度並行(非同步)執行的方法，要用到runSequence這個序列方法(順序執行)才可以在執行gulp後順序執行這些任務並在html中加入版本號
'less',
'uglify',
'imageMin',
'htmlMin',
done);
});
/*
熱更新
給每個任務開頭新增
.pipe(changed('dist', {
hasChanged: changed.compareSha1Digest
}))
結尾新增
.pipe(browserSync.reload({
stream: true
}));
然後啟動下面 serve任務
*/
gulp.task('serve', function() {
gulp.start('dev');
browserSync.init({
port: 2017,
server: {
baseDir: ['dist']
}
});
gulp.watch('src/js/*.js', ['dev']); //監控檔案變化，自動更新
gulp.watch('src/css/*.less', ['dev']);
gulp.watch('src/view/*.html', ['dev']);
gulp.watch('src/images/*.*', ['dev']);
});
gulp.task('default', ['serve']);
複製程式碼