Gulp：高效前端自动化构建工具

ulp是一个基于流的自动化构建工具，它使用Node.js的Stream API来处理文件，允许开发者自动化前端开发流程中的常见任务，如压缩、合并、转换文件等。

特点：

基于流：Gulp的核心是流，这意味着数据可以在不同的插件之间传递，无需临时文件，提高了效率。
插件丰富：Gulp拥有大量的插件，用于各种任务，如Sass转CSS、Babel转ES6、文件压缩等。
代码简洁：Gulp的配置文件gulpfile.js通常比较简洁，易于阅读和维护。
任务运行监控：Gulp提供了watch功能，可以实时监控文件变化，并自动重新运行相关任务。
可扩展性：通过编写自定义插件，开发者可以轻松地扩展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'));

在这个示例中，我们创建了一个Gulp任务来编译Sass文件，并设置了一个watch任务来监控Sass文件的变化。默认任务将同时运行这两个任务。

总结：

Gulp以其简洁的配置、强大的插件生态和流畅的工作方式，成为了前端开发中广泛使用的自动化工具。它的学习曲线相对较低，适合初学者和专业开发者使用，帮助他们提高工作效率，简化复杂的构建流程。

荐使用gulp-rev + gulp-rev-collector是比较方便的方法，结果如下:

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

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

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

但是由于公司发布系统限制，如果用上面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是:

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

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

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

怎么破?改上面两个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.结果达到预期，如下：

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 根据MD5获取版本号

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风格

.pipe(jshint({

"undef": false,

"unused": false

}))

//.pipe(jshint.reporter('default')) //错误默认提示

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

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

});

//压缩JS/生成版本号

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里更新引入文件版本号

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/生成版本号

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/')]);

})

//意外出错？清除缓存文件

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

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

})

//开发构建

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

condition=false;

runSequence(

['revFont', 'revImg'],

['lintJs'],

['revCollectorCss'],

['miniCss', 'miniJs'],

['miniHtml', 'delRevCss'],

done);

});

//正式构建

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

runSequence(

['revFont', 'revImg'],

['lintJs'],

['revCollectorCss'],

['miniCss', 'miniJs'],

['miniHtml', 'delRevCss'],

done);

});

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

ulpjs主要进行CSS文件与JS文件压缩和合并，为什么要压缩和合并呢，假如说HTML引了10多个JS,一个个写相对麻烦，加载时间也长，直接gulpjs压缩到一个文件，快速提高运行速度，提高用户体验度。

二、gulpjs安装

gulpjs的安装需要依赖Node.js，

1：先下载nodejs网址：nodejs.cn

2：打开node.js，在窗口写出npm install -gulp （安装全局gulpjs）下载较慢。

3：npm install --save-dev gulp （安装作为项目开发所需要的依赖项）

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：在我们的项目文件夹下要建立一个以gulpfle.js命名的文件。一定要以gulpfle.js来命名。

11：详细可参考：www.houdunwang.com

三、gulpjs的css文件的合并和压缩

//定义依赖项

var gulp=require（′gulp′),

//定义合并插件

concat=require（′gulp-concat′),

//定义压缩css的插件

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

//定义重命名插件

rename=require（′gulp-rename′);

//定义一个名字为css任务

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

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

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

//执行合并插件并结合并完成文件起一个名字

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

//执行压缩插件

.pipe(mincss())

//执行重命名插件

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

//把执行以上操作过后的文件放在css1文件夹内

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

})

//执行任务名为css的任务

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

四、gulpjs的自动执行

详细视频搜后盾人可观看。

更多精彩内容请关注 ---- 微信公众号：houdunit

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

在线咨询

上一篇：29. 教你零基础搭建小程序：小程序的常见组件—ra
下一篇：渐变炫酷动感线条背景科技PPT模板-免费下载

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Gulp：高效前端自动化构建工具

特点：

使用示例：

总结：

您的项目需求