整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ulp是一個基于流的自動化構建工具，它使用Node.js的Stream API來處理文件，允許開發(fā)者自動化前端開發(fā)流程中的常見任務，如壓縮、合并、轉換文件等。
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'));
在這個示例中，我們創(chuàng)建了一個Gulp任務來編譯Sass文件，并設置了一個watch任務來監(jiān)控Sass文件的變化。默認任務將同時運行這兩個任務。
Gulp以其簡潔的配置、強大的插件生態(tài)和流暢的工作方式，成為了前端開發(fā)中廣泛使用的自動化工具。它的學習曲線相對較低，適合初學者和專業(yè)開發(fā)者使用，幫助他們提高工作效率，簡化復雜的構建流程。
薦使用gulp-rev + gulp-rev-collector是比較方便的方法，結果如下:
"/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)限制，如果用上面方法實現(xiàn)，每次更新都會積壓過多過期無用的文件，我們預期效果是:
"/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"
怎么破?改上面兩個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 根據(jù)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/')]);
})
//開發(fā)構建
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網(wǎng)址：nodejs.cn
2：打開node.js，在窗口寫出npm install -gulp （安裝全局gulpjs）下載較慢。
3：npm install --save-dev gulp （安裝作為項目開發(fā)所需要的依賴項）
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′])
//執(zhí)行合并插件并結合并完成文件起一個名字
.pipe(concat(′max.css′))
//執(zhí)行壓縮插件
.pipe(mincss())
//執(zhí)行重命名插件
.pipe(rename({suffix:＇.hd＇}))
//把執(zhí)行以上操作過后的文件放在css1文件夾內(nèi)
.pipe(gulp.dest(＇css1＇));
})
//執(zhí)行任務名為css的任務
gulp.task(＇default＇,[＇css＇])
四、gulpjs的自動執(zhí)行
詳細視頻搜后盾人可觀看。
更多精彩內(nèi)容請關注 ---- 微信公眾號：houdunit
看完不要跑記得出來吐吐槽！╰(￣▽￣)╮
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
