gulp介紹
- 是一款nodejs應(yīng)用
- 打造前段工作流的利器暗挑,打包辜羊,壓縮踏兜,合并,git八秃,遠(yuǎn)程操作
- ......
gulp常見問題
1碱妆,安裝
npm install gulp-cli -g
全局安裝
npm install gulp -D
在當(dāng)前目錄下安裝(這樣才能require到,全局是require不到的昔驱,詳情見npm)
touch gulpfile.js
創(chuàng)建gulpfile.js文件
gulp --help
查看指令
- gulpfile.js
var gulp = require('gulp');
var pug = require('gulp-pug'); //模板文件 生成html
var less = require('gulp-less'); //將less轉(zhuǎn)化為css
var minifyCSS = require('gulp-csso'); //壓縮css
gulp.task('html',function () { //基床上定義了一個事件叫html
return gulp.src('client/templates/*.pug') //會把當(dāng)前src下面的所有的.pug文件輸進(jìn)去(物料)
.pipe(pug()) // 然后通過pipe()變成數(shù)據(jù)流 傳給pug() 處理之后又傳給后面的進(jìn)行pipe
.pipe(gulp.dest('build/html')) // 后面不需要處理了 就直接把它輸出成html
});
// 定義好之后 只需要命令行執(zhí)行 gulp html 就會執(zhí)行這個事情
//同理 也可以定義事件css 將less文件轉(zhuǎn)換為css并且壓縮
gulp.task('css',function () {
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
// 定義事件default 直接簡寫 直接命令行執(zhí)行 gulp 就會執(zhí)行這個default事件疹尾,然后由于這個任務(wù)里面有html css兩個任務(wù) 就會都執(zhí)行
gulp.task('default',['html','css']);
gulp使用
具體使用舉例1:(合并css文件)
文件夾結(jié)構(gòu)如圖
要將src文件夾下的幾個css文件合并并且壓縮到dist文件夾下的css中以便發(fā)布,具體操作流程如下:
- 1,在demo1下創(chuàng)建gulpfile.js
- 2航棱,在demo1下創(chuàng)建package.json(可以通過npm init)
- 3睡雇,運行npm install gulp --save-dev或者(-D)來在本地添加gulp使得我們可以在gulpfile.js中require到gulp萌衬,完成后package.json中出現(xiàn)"devDependencies"饮醇。
- 4,這樣就可以在gulpfile.js中var gulp = require('gulp');了秕豫,另外我們還需要cssnano(將css壓縮)和concat(文件合并)兩個插件,同樣的朴艰,我們進(jìn)行插件的安裝
npm install gulp-cssnano --save-dev
npm install --save-dev gulp-concat
- 5,進(jìn)行g(shù)ulpfile.js的書寫
首先介紹gulp的幾個重要方法
gulp對象的4個方法
具體使用見API文檔 - gulp其實就是一個對象,其實只有g(shù)ulp.src/gulp.dest/gulp.task/gulp.watch四個方法
- gulp.src的作用就是需要去處理哪些文件
- gulp.dest的作用就是輸出文件
- gulp.task 創(chuàng)建一個任務(wù) 一個任務(wù)可以認(rèn)為是一個流水線
- gulp.task中的參數(shù)中可以傳入依賴的其他任務(wù)混移,這些任務(wù)是默認(rèn)并行執(zhí)行的并且是在當(dāng)前任務(wù)之前執(zhí)行的
- gulp.watch監(jiān)測文件的改動
具體gulpfile.js的書寫:
- 引入模塊跟插件
//本地安裝gulp進(jìn)行開發(fā)npm install gulp -D 使得可以require到gulp
var gulp = require('gulp');
//安裝2個需要用到的插件
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
- 通過gulp.task創(chuàng)建一個任務(wù)祠墅,叫做css
gulp.task('css', function() {
// gulp.src('./src/css/*.css') //需要處理的文件是相對于gulpfile.js的路徑即當(dāng)前文件夾下的src/css下的所有的css文件
//如果只想處理common.css和index.css,那么可以寫成
gulp.src(['./src/css/common.css','./src/css/index.css']) //這樣就得到了數(shù)據(jù)流
.pipe(concat('index-merge.css')) //將數(shù)據(jù)流通過pipe傳遞給下一個工序歌径,這里是concat(),合并css文件并且命名為index-merge.css
.pipe(cssnano())//然后進(jìn)行壓縮
.pipe(gulp.dest('./dist/css')) //然后通過dest輸出到指定目錄下毁嗦,這里是dist文件夾下
});
寫好之后 可以通過終端 定位到當(dāng)前目錄下 運行g(shù)ulp 指定task名即可,這里是gulp css
運行之后我們的兩個css文件就合并成功了
接著我們可以把剩下的reset.css只進(jìn)行壓縮一下 也放到dist/css下
gulp.task('nanoReset',function () {
gulp.src('./src/css/reset.css')
.pipe(cssnano())
.pipe(gulp.dest('./dist/css'))
})
寫好之后運行gulp nanoReset
當(dāng)然也可以將task名字命名為default 這樣運行的時候就直接輸入gulp
即可運行 ,例如:
gulp.task('default',function () {
gulp.src('./src/css/reset.css')
.pipe(cssnano())
.pipe(gulp.dest('./dist/css'))
})
或者再創(chuàng)建一個task,名字為default,然后寫上gulp.task('default',['css'])
最后運行的時候輸入gulp
即可
具體使用舉例2:(實現(xiàn)一個保存代碼之后瀏覽器馬上刷新的效果)
用到一個nodejs應(yīng)用browser-sync
var gulp = require('gulp');
//引入組件
var browserSync = require('browser-sync').create();
var fs = require('fs');
gulp.task('reload',function () { //定義一個任務(wù)reload回铛,進(jìn)行刷新
browserSync.reload();
})
gulp.task('server',function () { //定義一個任務(wù)server 啟動一個服務(wù)器狗准,基準(zhǔn)路徑是./src
browserSync.init({
server: {
baseDir: "./src"
}
});
gulp.watch(['**/*.css','**/*.js','**/*.html'],['reload']); //監(jiān)聽文件,只要文件發(fā)生變化就進(jìn)行reload任務(wù)
})
具體應(yīng)用舉例3(實現(xiàn)css,js,圖片的壓縮合并等):
var gulp = require('gulp');
//引入組件
var minifycss = require('gulp-minify-css'), //css壓縮
uglify = require('gulp-uglify'), //js壓縮
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'), // 清空文件夾
minhtml = require('gulp-htmlmin'), // html壓縮
jshint = require('gulp-jshint'), //js代碼規(guī)范性檢查
imagemin = require('gulp-imagemin'); //圖片壓縮
gulp.task('html',function () {
return gulp.src('./src/*.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
})
gulp.task('css',function () {
gulp.src('./src/css/*.css')
.pipe(concat('merge.min.css'))
.pipe(renama({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
})
gulp.task('js',function () {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
})
gulp.task('img',function () {
gulp.src('./src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./dist/imgs'));
})
gulp.task('clear',function () {
gulp.src('./dist/*',{read: false})
.pipe(clean());
});
gulp.task('build',['html','css','js','img']);
運行gulp build
茵肃,如果需要清空dist內(nèi)的文件腔长,運行gulp clear