gulp安裝與操作
阿新 • • 發佈：2018-01-29
引入 join 文件壓縮 ash 配置 class 項目文件 文件路徑 默認
一、安裝nodejs
1. 下載nodejs安裝包
去nodejs官網下載軟件https://nodejs.org
2. 測試nodejs是否安裝
打開npm
node -v
二、安裝gulp
1. 全局安裝gulp
打開npm
npm install –g gulp
2. 本地安裝gulp
建立項目，我的項目結構
打開npm進入根目錄，安裝配置文件package.json
npm init
繼續在本地安裝gulp
npm install –-save-dev gulp
安裝完成後查看是否安裝成功
gulp -v
安裝成功，此時項目文件
三、安裝gulp相關插件
1. 根目錄下建立gulpfile.js文件
2. 執行任務（run-sequence）
npm 安裝 run-sequence
npm install --save-dev run-sequence
3. 文件重命名（gulp-rename）
npm 安裝 gulp-rename
npm install --save-dev gulp-rename
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rename = require("gulp-rename");
//定義css源文件路徑
var cssSrc = ‘src/css/*.css‘;
// css文件重命名
gulp.task(‘rename‘, function () {
return gulp.src(cssSrc)
.pipe(rename({suffix:‘.min‘}))//將*.css 文件重命名為 *.min.css
.pipe(gulp.dest(‘src/css‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘rename‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
4. css文件壓縮（gulp-minify-css）
npm 安裝 gulp-minify-css
npm install --save-dev gulp-minify-css
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rename = require("gulp-rename"),
minifyCss = require("gulp-minify-css");
//定義css源文件路徑
var cssSrc = ‘src/css/*.css‘;
// css文件壓縮
gulp.task(‘minify-css‘, function () {
return gulp.src([cssSrc,‘!src/css/*.min.css‘]) // 要壓縮的css文件
.pipe(rename({suffix:‘.min‘})) //重命名
.pipe(minifyCss()) //壓縮css
.pipe(gulp.dest(‘src/css‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘minify-css‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
5. js文件壓縮（gulp-uglify）
npm 安裝 gulp-uglify
npm install --save-dev gulp-uglify
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rename = require("gulp-rename"),
uglify = require("gulp-uglify");
//定義js源文件路徑
var jsSrc = ‘src/js/*.js‘;
//js文件壓縮
gulp.task(‘minify-js‘, function () {
return gulp.src([jsSrc,‘!src/js/*.min.js‘])
.pipe(rename({suffix:‘.min‘}))
.pipe(uglify()) //使用uglify進行壓縮
.pipe(gulp.dest(‘src/js‘)); //壓縮後的路徑
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘minify-js‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
5. css、js版本管理
npm 安裝 gulp-rev、gulp-rev-collector
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rev = require(‘gulp-rev‘),
revCollector = require(‘gulp-rev-collector‘);
//定義css、js源文件路徑
var cssSrc = ‘src/css/*.css‘,
jsSrc = ‘src/js/*.js‘;
//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task(‘revCss‘, function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/css‘));
});
//js生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task(‘revJs‘, function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/js‘));
});
//Html替換css、js文件版本
gulp.task(‘revHtml‘, function () {
return gulp.src([‘src/**/*.json‘, ‘src/*.html‘])
.pipe(revCollector())
.pipe(gulp.dest(‘src‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘revCss‘],
[‘revJs‘],
[‘revHtml‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
此時html文件如下
修改映射表中 屬性值的格式
打開node_modules\gulp-rev\index.js
第133行 manifest[originalFile] = revisionedFile;
修改為: manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;
修改生成文件的文件名（原來是將 hash 值加入到文件名中，現要文件名保持不變）：
打開node_modules\rev-path\index.js
第10行 return filename + ‘-‘ + hash + ext;
修改為: return filename + ext;
打開node_modules\gulp-rev-collector\index.js
第40行 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ‘‘ );
修改為：let cleanReplacement = path.basename(json[key])..split(‘?‘)[0];
//避免引用 URL 中的版本號累積
第163行 regexp: new RegExp( prefixDelim + pattern, ‘g‘ )
修改為： regexp: new RegExp( prefixDelim + pattern+‘(\\?v=\\w{10})?‘, ‘g‘ ),
6. 圖片壓縮（gulp-imagemin）
npm 安裝 gulp-imagemin、imagemin-pngquant
npm install --save-dev gulp-imagemin
npm install --save-dev imagemin-pngquant
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
imagemin = require(‘gulp-imagemin‘),
pngquant = require(‘imagemin-pngquant‘);
//定義img源文件路徑
var imgSrc = ‘src/img/*‘;
gulp.task(‘minify-img‘, function () {
return gulp.src(imgSrc)
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant來壓縮png圖片
}))
.pipe(gulp.dest(‘src/img/‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘minify-img‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
7. 文件合並（gulp-concat）
npm 安裝 gulp-concat
若安裝報錯則采用cnpm安裝
cnpm install --save-dev gulp-concat
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
concat = require("gulp-concat");
// 合並文件
gulp.task(‘concat‘, function () {
gulp.src(‘src/js/*.js‘) //要合並的文件
.pipe(concat(‘all.js‘)) // 合並匹配到的js文件並命名為 "all.js"
.pipe(gulp.dest(‘src/js‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘concat‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
8. sass安裝（gulp-sass）
npm 安裝 gulp-sass後使用gulp會報錯，我們采用淘寶 npm 鏡像解決
安裝cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm 安裝 gulp-sass
cnpm install --save-dev gulp-sass
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rename = require("gulp-rename"),
minifyCss = require("gulp-minify-css"),
sass = require("gulp-sass");
//定義acss源文件路徑
var sassSrc = ‘src/css/*.scss‘;
// sass使用
gulp.task(‘compile-sass‘, function () {
return gulp.src(sassSrc)
.pipe(sass())
.pipe(rename({suffix:‘.min‘}))
.pipe(minifyCss()) //壓縮css
.pipe(gulp.dest(‘src/css‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘compile-sass‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
9. 雪碧圖制作（gulp.spritesmith）
npm 安裝 gulp.spritesmith
npm install --save-dev gulp.spritesmith
編輯gulpfile.js
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
spritesmith=require(‘gulp.spritesmith‘);
// spritesmith使用
gulp.task(‘sprites‘, function () {
return gulp.src(‘images/icon-*.png‘)//需要合並的圖片地址
.pipe(spritesmith({
imgName:‘css/icon.png‘, //保存合並後圖片的地址
cssName:‘css/icon.css‘,//保存合並後對於css樣式的地址
padding:5,// 每個圖片之間的間距，默認為0px
cssTemplate:(data)=>{
// data為對象，保存合成前小圖和合成打大圖的信息包括小圖在大圖之中的信息
let arr = [],
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
url = data.spritesheet.image
arr.push(
".icon{display:inline-block;"+
"background: url(‘"+url+"‘);"+
"*display: inline;"+
"*zoom: 1;"+
"padding: 0;"+
"border: 0;"+
"background-repeat: no-repeat;"+
"}\n"
)
data.sprites.forEach(function(sprite) {
arr.push(
"."+sprite.name+
"{"+
"background-position: "+ sprite.px.offset_x+" "+sprite.px.offset_y+";"+
"background-size: "+ width+" "+height+";"+
"width: "+sprite.px.width+";"+
"height: "+sprite.px.height+";"+
"}\n"
)
})
return arr.join("")
}
}))
.pipe(gulp.dest(‘css/‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘sprites‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
附上綜合代碼
//引入gulp和gulp插件
var gulp = require(‘gulp‘),
runSequence = require(‘run-sequence‘),
rev = require(‘gulp-rev‘),
revCollector = require(‘gulp-rev-collector‘),
uglify = require("gulp-uglify"),
rename = require("gulp-rename"),
minifyCss = require("gulp-minify-css"),
imagemin = require(‘gulp-imagemin‘),
pngquant = require(‘imagemin-pngquant‘),
concat = require("gulp-concat"),
sass = require("gulp-sass"),
spritesmith = require("gulp.spritesmith");
//定義css、js源文件路徑
var cssSrc = ‘src/css/*.css‘,
jsSrc = ‘src/js/*.js‘,
imgSrc = ‘src/img/*‘,
sassSrc = ‘src/css/*.scss‘;
//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task(‘revCss‘, function(){
return gulp.src(cssSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/css‘));
});
//js生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task(‘revJs‘, function(){
return gulp.src(jsSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/js‘));
});
//Html替換css、js文件版本
gulp.task(‘revHtml‘, function () {
return gulp.src([‘src/**/*.json‘, ‘src/*.html‘])
.pipe(revCollector())
.pipe(gulp.dest(‘src‘));
});
// css文件重命名
gulp.task(‘rename‘, function () {
return gulp.src(cssSrc)
.pipe(rename({suffix:‘.min‘}))//將*.css 文件重命名為 *.min.css
.pipe(gulp.dest(‘src/css‘));
});
//js文件壓縮
gulp.task(‘minify-js‘, function () {
return gulp.src([jsSrc,‘!src/js/*.min.js‘])
.pipe(rename({suffix:‘.min‘}))
.pipe(uglify()) //使用uglify進行壓縮,更多配置請參考：
.pipe(gulp.dest(‘src/js‘)); //壓縮後的路徑
});
// css文件壓縮
gulp.task(‘minify-css‘, function () {
return gulp.src([cssSrc,‘!src/css/*.min.css‘]) // 要壓縮的css文件
.pipe(rename({suffix:‘.min‘}))
.pipe(minifyCss()) //壓縮css
.pipe(gulp.dest(‘src/css‘));
});
//圖片壓縮
gulp.task(‘minify-img‘, function () {
return gulp.src(imgSrc)
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant來壓縮png圖片
}))
.pipe(gulp.dest(‘src/img/‘));
});
// 合並文件
gulp.task(‘concat‘, function () {
return gulp.src(‘src/js/*.js‘) //要合並的文件
.pipe(concat(‘all.js‘)) // 合並匹配到的js文件並命名為 "all.js"
.pipe(gulp.dest(‘src/js‘));
});
// sass使用
gulp.task(‘compile-sass‘, function () {
return gulp.src(sassSrc)
.pipe(sass())
.pipe(rename({suffix:‘.min‘}))
.pipe(minifyCss()) //壓縮css
.pipe(gulp.dest(‘src/css‘));
});
// spritesmith使用
gulp.task(‘sprites‘, function () {
return gulp.src(‘images/icon-*.png‘)//需要合並的圖片地址
.pipe(spritesmith({
imgName:‘css/icon.png‘, //保存合並後圖片的地址
cssName:‘css/icon.css‘,//保存合並後對於css樣式的地址
padding:5,// 每個圖片之間的間距，默認為0px
cssTemplate:(data)=>{
// data為對象，保存合成前小圖和合成打大圖的信息包括小圖在大圖之中的信息
let arr = [],
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
url = data.spritesheet.image
// console.log(data)
arr.push(
".icon{display:inline-block;"+
"background: url(‘"+url+"‘);"+
"*display: inline;"+
"*zoom: 1;"+
"padding: 0;"+
"border: 0;"+
"background-repeat: no-repeat;"+
"}\n"
)
data.sprites.forEach(function(sprite) {
arr.push(
"."+sprite.name+
"{"+
"background-position: "+ sprite.px.offset_x+" "+sprite.px.offset_y+";"+
"background-size: "+ width+" "+height+";"+
"width: "+sprite.px.width+";"+
"height: "+sprite.px.height+";"+
"}\n"
)
})
return arr.join("")
}
}))
.pipe(gulp.dest(‘css/‘));
});
//開發構建
gulp.task(‘dev‘, function (done) {
condition = false;
runSequence(
[‘revCss‘],
[‘revJs‘],
[‘revHtml‘],
[‘rename‘],
[‘minify-js‘],
[‘minify-css‘],
[‘minify-img‘],
[‘concat‘],
[‘compile-sass‘],
[‘sprites‘],
done);
});
gulp.task(‘default‘, [‘dev‘]);
gulp安裝與操作