介紹
基于流伙狐，強調(diào)開發(fā)流程
gulp.png
功能
- 把一個文件拷貝到另一個位置
- 把多個js或css文件合并成一個文件仗岖，以減少網(wǎng)絡(luò)請求數(shù)
- 對js文件和css文件進行壓縮合并 以減少網(wǎng)絡(luò)流量
- 把sess或less文件編譯成css
- 壓縮圖像文件圈盔，以減少網(wǎng)絡(luò)流量
- 創(chuàng)建一個可以實時刷新頁面內(nèi)容和本地服務(wù)器等等
安裝gulp
- 新建項目文件夾
- 進入文件夾 npm init初始化
- 完善package.json
- npm install gulp--save-dev在node module下安裝本地gulp（開發(fā)階段使用）
- 并配置到package.json文件里面
gulp命令行(感覺用處不大)
--gulpfile手動指定一個gulpfile的路徑，這在你有很多個gulpfile的時候使用 這也會將cwd設(shè)置到該gulpfile所在目錄
eg:--gulpfile gulpfile1
--cwd dirpath手動指定cwd(當(dāng)前工作目錄) 定義gulpfile的查找位置，此外琅捏，所有的相應(yīng)的依賴（require）會從這里開始計算相對路徑
eg: gulp hello1 --cwd history
-T或--task會顯示所指定gulpfile的task依賴樹
-tasks-simple會以純文本的方式顯示所載入的gulpfile中task列表
gulp的工作方式
gulp的使用流程一般是：首先通過gulp.src()方法獲取到想要處理的文件流
然后把文件流通過pipe方法導(dǎo)入到gulp的插件中
最后把經(jīng)過插件處理后的流在通過pipe方法導(dǎo)入到gulp.dest()中
gulp.desk()方法則把流中的內(nèi)容寫入到文件中。
例如
var gulp=require('gulp');
gulp.src('script/src.js')//獲取文件的流的api
.pipe(gulp.dest)//寫文件的api
gulp.src()入口文件路徑
gulp.src(globs,[,options]);
參數(shù)
- globs參數(shù)是文件匹配模式（類似正則表達式）递雀，用來匹配文件路徑（包括文件名）柄延，當(dāng)然這里也可以直接指定某個具體的文件路徑。當(dāng)有多個匹配模式時缀程，該參數(shù)可以為一個數(shù)組
- options為可選參數(shù)拦焚。通常情況下我們不需要用到
- {base:***}//基準路徑 默認值為通配符開始出現(xiàn)之那部分路徑
目標路徑怎么決定 - dist路徑加上原始路徑減去base路徑
globs語法
匹配符 說明
* 匹配文件路徑中的0個或多個字符，但不會匹配路徑分割符杠输，
除非分隔符出現(xiàn)在末尾
** 匹配路徑的0個會多個目錄 及子目錄 需要單獨出現(xiàn)赎败，
即他左右不能有其他的東西了如果出現(xiàn)在末尾，也能匹配文件
蠢甲？ 匹配文件路徑中的一個字符（不能匹配路徑分割符/）
[...] 匹配方括號中 出現(xiàn)字符的任意一個僵刮，當(dāng)方括號中第一個字符為^或!時，
則表示不匹配方括號中出現(xiàn)字符中的任意一個鹦牛，
類似于js中正則表達式中的用法
!(pattern|pattern|pattern) 匹配任何與括號中給定的任意模式都不匹配
搞糕？(pattern|pattern|pattern) 匹配括號中給定的任意模式0次或1次
+(pattern|pattern|pattern) 匹配括號中的至少一次
*(pattern|pattern|pattern) 匹配括號中給定的任意模式0次或多次
@(pattern|pattern|pattern) 匹配括號中 給定的任意模式一次
eg：glob 匹配
|能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js|
|.* a.js,style.css,a.b,x.y
//*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配所有的目錄和文件
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因為只有單**單獨出現(xiàn)才能匹配多級目錄
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因為它不會匹配路徑分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不會匹配xy.js,xyz.js等,整個中括號只代表一個字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
gulp.dest(); 用來寫入文件的，
gulp.dest(path,[,options]);
//path為文件路徑
//options為一個 可選對象曼追，通常不需要用到
gulp.watch()
用來監(jiān)視文件的變化窍仰，當(dāng)文件發(fā)生變化后，我們可以利用它來執(zhí)行相應(yīng)的任務(wù)礼殊，例如文件壓縮等驹吮。
gulp.watch(globs[,opts],tasks);
//glob為要見識的文件匹配模式 ，規(guī)則和用法與gulp.src方法中的glob相同
//opts為一個可配置對象 通常不需要用到
//tasks為文件變化后要執(zhí)行的任務(wù)晶伦，為一個數(shù)組
插件
package.png
使用插件
npm install XX --save-dev 安裝插件到當(dāng)前的項目dev
在gulpfile.js頂部引入此插件
在創(chuàng)建任務(wù)的時候使用此插件
gulp-load-plugins這個插件會自動幫你加載package.json文件里的gulp插件
- 編譯Sass： gulp-sass
gulp.task('default',function(){//js文件合并
gulp.src('app/sass/!*.sass').pipe($.sass()).pipe(gulp.dest('dist/css'));
})
- 編譯less： gulp-less
gulp.task('default',function(){//js文件合并
gulp.src('app/less/!*.less').pipe($.less()).pipe(gulp.dest('dist/css'));
})
- 合并文件： gulp-concat
gulp.task('default',function(){
gulp.src('app/!*.js').pipe($.concat('all.js')).pipe(gulp.dest('dist'));
})
- 壓縮js文件： gulp-uglify
gulp.task('default',function(){
gulp.src(['app/js/*.js']).pipe($.uglify()).pipe(gulp.dest('dist/js'))錄下
})
- 重命名js文件： gulp-rename
gulp.task('default',function(){
gulp.src(['app/js/*.js']).pipe($.rename('app.min.js')).pipe(gulp.dest('dist/js'))
})
- 優(yōu)化圖像大兄勐健： gulp-imagemin
gulp.task('default',function(){
gulp.src('app/images/*.{jpg,png,JPG,PNG}').pipe($.imagemin()).pipe(gulp.dest('dist/images'))
})
- 壓縮css文件： gulp-minify-css
gulp.task('default',function(){
gulp.src'app/css/*.css').pipe($.minifyCss()).pipe(gulp.dest('dist/css'))
})
- 創(chuàng)建本地服務(wù)器： gulp-connect
gulp.task('server',function(){
$.connect.server({
root:'dist',//服務(wù)器的根目錄
port:8080, //服務(wù)器的地址桥胞，沒有此配置項默認也是 8080
livereload:true//啟用實時刷新的功能
});
});
- 實時預(yù)覽： gulp-connect
gulp.task('copy-html',function(){
gulp.src('app/index.html')//指定源文件
.pipe(gulp.dest('dist'))//拷貝到dist目錄
.pipe($.connect.reload());//通知瀏覽器重啟
});
代碼檢查 jshint
gulp.task('jsLint', function () {
gulp.src('app/!*.js')
.pipe(jshint()) //進行代碼檢查
.pipe(jshint.reporter()); // 輸出檢查結(jié)果
});
gulpfile.js配置文件
目錄結(jié)構(gòu).png
可用于一般文件壓縮
var gulp=require('gulp');
var $=require('gulp-load-plugins')();
gulp.task('uglify',function(){
return gulp.src(['app/js/*.js'])
.pipe($.uglify())//壓縮app.js
//.pipe($.rename('app.min.js'))
.pipe(gulp.dest('dist/js'))//復(fù)制到dist/js目錄下
})
//壓縮css,編譯less
gulp.task('minify',function(){
return gulp.src(['app/css/*.less'])//指定 less文件
.pipe($.less())//把less編譯成css
//.pipe(gulp.dest('dist/css'))//輸出到目的地
.pipe($.minifyCss())//對 css再進行壓縮
.pipe($.rename({suffix:'.min'}))//重命名 可以用函數(shù)自定義新名字
.pipe(gulp.dest('dist/css'));//輸出到目的地
});
//單獨編譯css
gulp.task('minifycss',function(){
return gulp.src(['app/css/*.css'])//指定 less文件
.pipe($.minifyCss())//對 css再進行壓縮
.pipe($.rename({suffix:'.min'}))//重命名 可以用函數(shù)自定義新名字
.pipe(gulp.dest('dist/css'));//輸出到目的地
});
//壓縮圖片
gulp.task('copy-images',function(){
return gulp.src('app/images/*.{jpg,png,JPG,PNG}')//指定要壓縮的圖片
.pipe($.imagemin()) //進行圖片壓縮
.pipe(gulp.dest('dist/images'));//輸出目的地
});
gulp.task('html-min', function () {
var options = {
removeComments: true,//清除HTML注釋
collapseWhitespace: true,//壓縮HTML
//collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
//removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
//removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
//removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
//minifyJS: true,//壓縮頁面JS
//minifyCSS: true//壓縮頁面CSS
};
return gulp.src('app/html/*.html')
.pipe($.htmlmin(options))
.pipe(gulp.dest('dist/html'));
});
//代碼檢查
gulp.task('jsLint', function () {
return gulp.src('app/*.js')
.pipe($.jshint()) //進行代碼檢查
.pipe($.jshint.reporter()); // 輸出檢查結(jié)果
});
gulp.task('con',['copy-images','uglify','html-min','jsLint','minifycss','minify']);
//實時監(jiān)聽
gulp.task('default',function(){
gulp.watch('app/*/**.*',['con']);//當(dāng)index.html文件變化時執(zhí)行copy-html任務(wù) 實現(xiàn)頁面實時刷新
});
//右鍵運行run即可實現(xiàn)壓縮功能
