gulp實用配置（2）中小專案

在網際網路環境比較好的城市，需要多人協作的，大一點的專案應該都用上了模組化（這裡主要指commonjs和es6模組系統，不是再早的require.js和sea.js）。**也會更注重如何分離和注入，而不再是單純的合併。

但是在很多小公司，開發模式或技術都還是比較傳統的，或者一些小專案也完全不需要用上那些比較前沿的技術。

所以這篇配置就主要為了這樣的中小專案。

包管理工具：yarn v0.24.5

自動化構建工具：gulp v4.0

yarn add global gulpjs/gulp#4.0

var gulp = require('gulp'),
pug = require('gulp-pug'),
less = require('gulp-less'),
//當發生異常時提示錯誤 確保本地安裝gulp-notify和gulp-plumber
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
sourcemaps = require('gulp-sourcemaps'),
browsersync = require('browser-sync').create()
reload =browsersync.reload;
var lessautoprefix = require('less-plugin-autoprefix'),
autoprefix = new lessautoprefix();
//檔案路徑
var paths =,
less: ,
js: ,
img: }//
啟動 browsersync 服務，自己啟動server，並且為瀏覽器實時重新整理提供服務
gulp.task('browsersync', function
() ,
files: './dev/**/*'});
})//
將pug檔案轉換為html
gulp.task('pug', function
buildhtml() ))
.pipe(pug())
.pipe(gulp.dest(paths.pug.dest));
});//
編譯less檔案
gulp.task('less', function
() ))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.less.dest));
})//
複製js檔案
gulp.task('js', function
() )
//複製img檔案
gulp.task('img', function
() )
//監聽檔案變化
gulp.task('watch', function
() )
//預設任務，在命令列輸入`gulp`來啟動任務
gulp.task('default', gulp.parallel('watch', 'browsersync', 'pug', 'less', 'js'))

gulp-pug這個外掛程式是用來編譯pug模板的，也就是以前的jade模板，pug模板是乙個很強大的前後端通用的模板引擎，而且學習也很簡單，具體用法可以看我另外一篇關於pug的教程文章——基於express+mongodb+pug的部落格系統——pug篇。

大家知道gulp在監聽任務的過程中，如果某個環節出了錯誤，gulp就會被中斷，然後得重新啟動gulp任務才行，這是一件很麻煩的事。這裡可以通過gulp-notify和gulp-plumber兩個外掛程式來避免gulp任務中斷。

var gulp = require('gulp'),
del = require('del'),
pug = require('gulp-pug'),
less = require('gulp-less'),
cleancss = require('gulp-clean-css'),
base64 = require('gulp-tobase64'),
//img64 = require('gulp-imgbase64'),
imagemin = require('gulp-imagemin'),
babel = require('gulp-babel'),
uglify = require('gulp-uglify'),
rev = require('gulp-rev'), //
新增時間戳
revcollector = require('gulp-rev-collector');
var lessautoprefix = require('less-plugin-autoprefix'),
autoprefix = new
lessautoprefix();
//檔案路徑
var paths =,
less: ,
js: ,
img: 
};//
將pug檔案轉換為html
gulp.task('pug', function
() );
//編譯less檔案
gulp.task('less', function
() ))
.pipe(base64())
.pipe(cleancss())
.pipe(rev())
.pipe(gulp.dest(paths.less.dest))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
});//
壓縮gulp.task('img', function
() ))
.pipe(gulp.dest(paths.img.dest));
});//
編譯js檔案
gulp.task('js', function
() ))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(paths.js.dest))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});//
引用的外部 js 庫，不需要做壓縮和打時間戳等處理
//所以直接複製就行
gulp.task('copyjs', function
() )
//替換加了md5時間戳的檔案
gulp.task('rev', gulp.series(gulp.parallel('img64', 'less', 'js'), function
() ))
.pipe(gulp.dest(paths.pug.dest));
}));
//clean 任務執行前，先清除之前生成的檔案
gulp.task('clean', function
() );
//預設任務，在命令列輸入`gulp`來啟動任務
gulp.task('default', gulp.series('clean', gulp.series('img', gulp.parallel('rev', 'copyjs'))))

gulp-rev這個外掛程式就專門給檔案打md5戳的，打完md5戳之後，html檔案裡的引用當然也需要更改，如果每個都去手動更改肯定會是一件很麻煩的事，所以我們還需要gulp-rev-collector這個外掛程式來幫我們替換打了md5戳的檔案。

gulp-imgbase64，這個外掛程式可以指定html檔案中，哪些img元素轉換為base64，需要更加個性化轉換的可以使用這個外掛程式。

***——

| — dist

| — html

| — css

| — img

| — js

| — lib

| — dev

| — html

| — css

| — img

| — js

| — lib

| — src

| — pug

| — components

| — pages

| — layout.pug

| — less

| — pages

| — main.less

| — reset.less

| — common.less

| — feature.less

| — img

| — js

| — lib

src資料夾裡是主要的業務**，這裡面是需要長期維護的**。

dev資料夾是開發時gulp生成**的地方。

dist資料夾是生成時gulp生成**的地方。

在這份配置裡，我並沒有像其他很多人那樣，把開發時通過gulp生成的**也放在src資料夾裡，因為那樣會造成很多引用上的麻煩，而且把開發和生產的**環境都分開，能很好保持src資料夾裡的純淨，不會有任何雜亂**。

所以一些沒經過gulp處理的檔案，我會直接把它們複製到dev或者dist資料夾裡對應的位置。

dist資料夾在每次gulp任務生成**前都會被清空，所以我們不用關心dist資料夾裡的內容。

而dev資料夾可能會有很多冗餘檔案，但我們也不需要擔心它會對我們造成任何影響，檔案刪除或覆蓋都不重要，只需要保證src資料夾裡的檔案正確即可。

gulp實用配置（2）中小專案

gulp實用配置（1） demo

gulp實用配置（1） demo

實用 PXE 配置不斷更新中

gulp實用配置（2） 中小專案

gulp實用配置（1） demo

gulp實用配置（1） demo

實用 PXE 配置 不斷更新中

相關推薦

gulp實用配置（2）中小專案

實用 PXE 配置不斷更新中