Gulp：高效前端自動(dòng)化構(gòu)建工具

ulp是一個(gè)基于流的自動(dòng)化構(gòu)建工具，它使用Node.js的Stream API來處理文件，允許開發(fā)者自動(dòng)化前端開發(fā)流程中的常見任務(wù)，如壓縮、合并、轉(zhuǎn)換文件等。

特點(diǎn)：

基于流：Gulp的核心是流，這意味著數(shù)據(jù)可以在不同的插件之間傳遞，無需臨時(shí)文件，提高了效率。
插件豐富：Gulp擁有大量的插件，用于各種任務(wù)，如Sass轉(zhuǎn)CSS、Babel轉(zhuǎn)ES6、文件壓縮等。
代碼簡潔：Gulp的配置文件gulpfile.js通常比較簡潔，易于閱讀和維護(hù)。
任務(wù)運(yùn)行監(jiān)控：Gulp提供了watch功能，可以實(shí)時(shí)監(jiān)控文件變化，并自動(dòng)重新運(yùn)行相關(guān)任務(wù)。
可擴(kuò)展性：通過編寫自定義插件，開發(fā)者可以輕松地?cái)U(kuò)展Gulp的功能。

使用示例：

const gulp=require('gulp');
const sass=require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
});

gulp.task('default', gulp.parallel('sass', 'watch'));

在這個(gè)示例中，我們創(chuàng)建了一個(gè)Gulp任務(wù)來編譯Sass文件，并設(shè)置了一個(gè)watch任務(wù)來監(jiān)控Sass文件的變化。默認(rèn)任務(wù)將同時(shí)運(yùn)行這兩個(gè)任務(wù)。

總結(jié)：

Gulp以其簡潔的配置、強(qiáng)大的插件生態(tài)和流暢的工作方式，成為了前端開發(fā)中廣泛使用的自動(dòng)化工具。它的學(xué)習(xí)曲線相對(duì)較低，適合初學(xué)者和專業(yè)開發(fā)者使用，幫助他們提高工作效率，簡化復(fù)雜的構(gòu)建流程。

薦使用gulp-rev + gulp-rev-collector是比較方便的方法，結(jié)果如下:

"/css/style.css"=> "/dist/css/style-1d87bebe.css"

"/js/script1.js"=> "/dist/script1-61e0be79.js"

"cdn/image.gif"=> "http://cdn8.example.dot/img/image-35c3af8134.gif"

但是由于公司發(fā)布系統(tǒng)限制，如果用上面方法實(shí)現(xiàn)，每次更新都會(huì)積壓過多過期無用的文件，我們預(yù)期效果是:

"/css/style.css"=> "/dist/css/style.css?v=1d87bebe"

"/js/script1.js"=> "/dist/script1.js?v=61e0be79"

"cdn/image.gif"=> "http://cdn8.example.dot/img/image.gif?v=35c3af8134"

怎么破?改上面兩個(gè)Gulp插件是最高效的方法了。

1.安裝Gulp

npm install --save-dev gulp

2.分別安裝gulp-rev、gulp-rev-collerctor

npm install --save-dev gulp-rev

npm install --save-dev gulp-rev-collector

3.打開node_modules\gulp-rev\index.js

第133行 manifest[originalFile]=revisionedFile;
更新為: manifest[originalFile]=originalFile + '?v=' + file.revHash;

4.打開node_modules\gulp-rev\node_modules\rev-path\index.js

10行 return filename + '-' + hash + ext;
更新為: return filename + ext;

5.打開node_modules\gulp-rev-collector\index.js

31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==path.basename(key) ) {
更新為: if ( path.basename(json[key]).split('?')[0] !==path.basename(key) ) {

6.配置gulpfile.js, 可參考下面gulpfile.js代碼

7.結(jié)果達(dá)到預(yù)期，如下：

Css

background: url('../img/one.jpg?v=28bd4f6d18');

src: url('/fonts/icomoon.eot?v=921bbb6f59');

Html

href="css/main.css?v=885e0e1815"

src="js/main.js?v=10ba7be289"

src="img/one.jpg?v=28bd4f6d18"

├── package.json

├── gulpfile.js

├── src/

│ ├── css/

│ │ ├── main.less

│ │ └── normalize.less

│ ├── js/

│ │ ├── xx.js

│ │ └── xx.js

│ ├── img/

│ │ ├── xx.jpg

│ │ └── xx.png

│ ├── fonts/

│ │ ├── xx.svg

│ │ └── xx.ttf

│ ├── rev/

│ ├── index.html

package.json:

{

"devDependencies": {

"apache-server-configs": "2.14.0",

"archiver": "^0.14.3",

"del": "^1.1.1",

"glob": "^5.0.5",

"gulp": "^3.8.11",

"gulp-autoprefixer": "^2.1.0",

"gulp-changed": "^1.2.1",

"gulp-csslint": "^0.1.5",

"gulp-header": "^1.2.2",

"gulp-if": "^1.2.5",

"gulp-jshint": "^1.11.2",

"gulp-less": "^3.0.3",

"gulp-load-plugins": "^0.10.0",

"gulp-minify-css": "^1.2.0",

"gulp-minify-html": "^1.0.4",

"gulp-rev": "^5.1.0",

"gulp-rev-collector": "^1.0.0",

"gulp-uglify": "^1.2.0",

"gulp-util": "^3.0.6",

"jquery": "1.11.3",

"jshint": "^2.8.0",

"jshint-stylish": "^2.0.1",

"mocha": "^2.2.4",

"normalize.css": "3.0.3",

"run-sequence": "^1.0.2"

"engines": {

"node": ">=0.10.0"

"h5bp-configs": {

"directories": {

"archive": "archive",

"dist": "dist",

"src": "src",

"test": "test"

}

"homepage": "",

"license": {

"type": "MIT",

"url": ""

"name": "gulp-auto-version",

"private": true,

"scripts": {

"build": "gulp build",

"test": ""

"version": "1.0.0",

"dependencies": {}

}

gulpfile.js

var gulp=require('gulp'),

runSequence=require('run-sequence'),

gulpif=require('gulp-if'),

uglify=require('gulp-uglify'),

less=require('gulp-less'),

csslint=require('gulp-csslint'),

rev=require('gulp-rev'),

minifyCss=require('gulp-minify-css'),

changed=require('gulp-changed'),

jshint=require('gulp-jshint'),

stylish=require('jshint-stylish'),

revCollector=require('gulp-rev-collector'),

minifyHtml=require('gulp-minify-html'),

autoprefixer=require('gulp-autoprefixer'),

del=require('del');

var cssSrc=['main.less', 'layer-box.less', 'tag.less'],

cssDest='dist/css',

jsSrc='src/js/*.js',

jsDest='dist/js',

fontSrc='src/fonts/*',

fontDest='dist/font',

imgSrc='src/img/*',

imgDest='dist/img',

cssRevSrc='src/css/revCss',

condition=true;

function changePath(basePath){

var nowCssSrc=[];

for (var i=0; i < cssSrc.length; i++) {

nowCssSrc.push(cssRevSrc + '/' + cssSrc[i]);

}

return nowCssSrc;

}

//Fonts & Images 根據(jù)MD5獲取版本號(hào)

gulp.task('revFont', function(){

return gulp.src(fontSrc)

.pipe(rev())

.pipe(gulp.dest(fontDest))

.pipe(rev.manifest())

.pipe(gulp.dest('src/rev/font'));

});

gulp.task('revImg', function(){

return gulp.src(imgSrc)

.pipe(rev())

.pipe(gulp.dest(imgDest))

.pipe(rev.manifest())

.pipe(gulp.dest('src/rev/img'));

});

//檢測JS

gulp.task('lintJs', function(){

return gulp.src(jsSrc)

//.pipe(jscs()) //檢測JS風(fēng)格

.pipe(jshint({

"undef": false,

"unused": false

}))

//.pipe(jshint.reporter('default')) //錯(cuò)誤默認(rèn)提示

.pipe(jshint.reporter(stylish)) //高亮提示

.pipe(jshint.reporter('fail'));

});

//壓縮JS/生成版本號(hào)

gulp.task('miniJs', function(){

return gulp.src(jsSrc)

.pipe(gulpif(

condition, uglify()

))

.pipe(rev())

.pipe(gulp.dest(jsDest))

.pipe(rev.manifest())

.pipe(gulp.dest('src/rev/js'));

});

//CSS里更新引入文件版本號(hào)

gulp.task('revCollectorCss', function () {

return gulp.src(['src/rev/**/*.json', 'src/css/*.less'])

.pipe(revCollector())

.pipe(gulp.dest(cssRevSrc));

});

//檢測CSS

gulp.task('lintCss', function(){

return gulp.src(cssSrc)

.pipe(csslint())

.pipe(csslint.reporter())

.pipe(csslint.failReporter());

});

//壓縮/合并CSS/生成版本號(hào)

gulp.task('miniCss', function(){

return gulp.src(changePath(cssRevSrc))

.pipe(less())

.pipe(gulpif(

condition, minifyCss({

compatibility: 'ie7'

})

))

.pipe(rev())

.pipe(gulpif(

condition, changed(cssDest)

))

.pipe(autoprefixer({

browsers: ['last 2 versions'],

cascade: false,

remove: false

}))

.pipe(gulp.dest(cssDest))

.pipe(rev.manifest())

.pipe(gulp.dest('src/rev/css'));

});

//壓縮Html/更新引入文件版本

gulp.task('miniHtml', function () {

return gulp.src(['src/rev/**/*.json', 'src/*.html'])

.pipe(revCollector())

.pipe(gulpif(

condition, minifyHtml({

empty: true,

spare: true,

quotes: true

})

))

.pipe(gulp.dest('dist'));

});

gulp.task('delRevCss', function(){

del([cssRevSrc,cssRevSrc.replace('src/', 'dist/')]);

})

//意外出錯(cuò)？清除緩存文件

gulp.task('clean', function(){

del([cssRevSrc ,cssRevSrc.replace('src/', 'dist/')]);

})

//開發(fā)構(gòu)建

gulp.task('dev', function (done) {

condition=false;

runSequence(

['revFont', 'revImg'],

['lintJs'],

['revCollectorCss'],

['miniCss', 'miniJs'],

['miniHtml', 'delRevCss'],

done);

});

//正式構(gòu)建

gulp.task('build', function (done) {

runSequence(

['revFont', 'revImg'],

['lintJs'],

['revCollectorCss'],

['miniCss', 'miniJs'],

['miniHtml', 'delRevCss'],

done);

});

gulp.task('default', ['build']);

ulpjs主要進(jìn)行CSS文件與JS文件壓縮和合并，為什么要壓縮和合并呢，假如說HTML引了10多個(gè)JS,一個(gè)個(gè)寫相對(duì)麻煩，加載時(shí)間也長，直接gulpjs壓縮到一個(gè)文件，快速提高運(yùn)行速度，提高用戶體驗(yàn)度。

二、gulpjs安裝

gulpjs的安裝需要依賴Node.js，

1：先下載nodejs網(wǎng)址：nodejs.cn

2：打開node.js，在窗口寫出npm install -gulp （安裝全局gulpjs）下載較慢。

3：npm install --save-dev gulp （安裝作為項(xiàng)目開發(fā)所需要的依賴項(xiàng)）

4：安裝所需要的插件，首先安裝用來壓縮JS與CSS的插件，在打開nodejs的窗口輸入：npm install

--save-dev gulp-uglify（安裝用來壓縮JS文件的插件）

5：npm install --save-dev gulp-minify-css（安裝用來壓縮css文件的插件）:

6：npm install --save-dev gulp-concat（安裝用來合并的插件）

7：npm install --save-dev gulp-jshint（安裝用來檢查js代碼的插件）

8：npm install --save-dev gulp-rename（安裝用來重命名的插件）

9：npm install --save-dev gulp-uglify gulp-minify-css gulp-concat gulp-jshint gulp-rename（也可以一起安裝插件注意空格）

10：在我們的項(xiàng)目文件夾下要建立一個(gè)以gulpfle.js命名的文件。一定要以gulpfle.js來命名。

11：詳細(xì)可參考：www.houdunwang.com

三、gulpjs的css文件的合并和壓縮

//定義依賴項(xiàng)

var gulp=require（′gulp′),

//定義合并插件

concat=require（′gulp-concat′),

//定義壓縮css的插件

mincss=require（′gulp-minify-css′),

//定義重命名插件

rename=require（′gulp-rename′);

//定義一個(gè)名字為css任務(wù)

gulp.task(′css′,funtion(){

//操作css文件夾中所有的css文件

gulp.src([′css/*.css′])

//執(zhí)行合并插件并結(jié)合并完成文件起一個(gè)名字

.pipe(concat(′max.css′))

//執(zhí)行壓縮插件

.pipe(mincss())

//執(zhí)行重命名插件

.pipe(rename({suffix:＇.hd＇}))

//把執(zhí)行以上操作過后的文件放在css1文件夾內(nèi)

.pipe(gulp.dest(＇css1＇));

})

//執(zhí)行任務(wù)名為css的任務(wù)

gulp.task(＇default＇,[＇css＇])

四、gulpjs的自動(dòng)執(zhí)行

詳細(xì)視頻搜后盾人可觀看。

更多精彩內(nèi)容請(qǐng)關(guān)注 ---- 微信公眾號(hào)：houdunit

看完不要跑記得出來吐吐槽！╰(￣▽￣)╮

在線咨詢

上一篇：29. 教你零基礎(chǔ)搭建小程序：小程序的常見組件—ra
下一篇：漸變炫酷動(dòng)感線條背景科技PPT模板-免費(fèi)下載

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Gulp：高效前端自動(dòng)化構(gòu)建工具

特點(diǎn)：

使用示例：

總結(jié)：

您的項(xiàng)目需求