gulp入門(mén)
gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器习蓬；他不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化纽什，而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它躲叼，我們不僅可以很愉快的編寫(xiě)代碼芦缰，而且大大提高我們的工作效率。
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器押赊， 她能自動(dòng)化地完成css饺藤、html包斑、image流礁、javascript等文件的的測(cè)試、檢查罗丰、合并神帅、壓縮、格式化萌抵、瀏覽器自動(dòng)刷新找御，并監(jiān)聽(tīng)文件在改動(dòng)后重復(fù)指定的這些步驟。gulp 和 grunt 非常類(lèi)似绍填，但相比于 grunt 的頻繁 IO 操作霎桅，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作讨永。
教程參考網(wǎng)站：http://www.ydcss.com/archives/18
1. 首先安裝node
2. 安裝淘寶鏡像滔驶，可使用cnmp速度更快
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安裝gulp
cnpm install gulp-g
查看是否正確安裝：命令提示符執(zhí)行npm gulp -v，出現(xiàn)版本號(hào)即為正確安裝
4. 在項(xiàng)目中初始化
在項(xiàng)目文件夾--右擊--git bash here---打開(kāi)命令行窗口
cnpm ?init
輸入相應(yīng)項(xiàng)目信息卿闹，在自動(dòng)生成的package.json中查看
Ctrl+C ?結(jié)束當(dāng)前命令
5. 在項(xiàng)目中安裝
cnpm install gulp --save-dev
--save-dev可將信息添加到package.json中,查看是否加入
6. html壓縮
安裝壓縮html的插件
cnpm install gulp-minify-html --save-dev
新建項(xiàng)目根目錄下gulpfile.js,寫(xiě)入
vargulp=require('gulp');//本地安裝gulp所用到的地方
varminifyHtml=require("gulp-minify-html");//加入相應(yīng)依賴
//html壓縮
gulp.task('htmltask',function() {//htmltask為自定義的任務(wù)名稱
gulp.src('*.html')// 要壓縮的html文件
.pipe(minifyHtml())//壓縮揭糕，和上面定義的依賴名相同
.pipe(gulp.dest('./dist'))//壓縮到哪
});
在命令中輸入萝快，執(zhí)行上面的任務(wù)
gulphtmltask
總結(jié)：步驟1安裝插件 ?2添加依賴 ?3 添加
生成里dist ?里面只有一行文字
7. css壓縮
安裝壓縮css的插件cnpm installgulp-clean-css--save-dev
gulp-minify-css已經(jīng)被廢棄，請(qǐng)使用gulp-clean-css著角，用法一致
gulpfile.js在最上面增加依賴
var minifycss= require('gulp-clean-css');
下面添加
gulp.task('csstask',function(){
gulp.src('./css/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./dist/css'));//dist下新建css文件夾
});
在命令中輸入揪漩，執(zhí)行上面的任務(wù)
gulpcsstask
8. js壓縮 合并
安裝壓縮js的插件npm installgulp-uglify--save-dev
安裝合并js的插件npm installgulp-concat--save-dev
gulpfile.js在最上面增加依賴
var minifyjs= require("gulp-uglify");
varconcat=require('gulp-concat');
下面添加：
gulp.task('jstask',function(){
gulp.src('./js/*.js')
.pipe(minifyjs())// 壓縮
.pipe(concat('all.js'))//合并后叫all.js
.pipe(gulp.dest('./dist/js'))//輸出到dist下js文件夾
});
在命令中輸入，執(zhí)行上面的任務(wù)
gulpjstask
9. 生成雪碧圖
安裝插件：
cnpm install gulp.spritesmith --save-dev
在gulpfile上面加入：
var spritesmith=require('gulp.spritesmith');
在下面添加：
gulp.task('sprite',function(){
gulp.src(['./img/*.png'])//此處方括號(hào)吏口，為數(shù)組奄容，可以是多種格式，或者任意幾張圖片
.pipe(spritesmith({
imgName:'sprite.png',//生成大圖的名字产徊，注意加擴(kuò)展名.png或.jpg
cssName:'sprite.css'//生成css文件名
}))
.pipe(gulp.dest('./dist/sprites'));
})
10. 自動(dòng)監(jiān)聽(tīng)
//自動(dòng)監(jiān)聽(tīng)
gulp.task('watch', function () {
gulp.watch('*.html', ['htmltask']);//監(jiān)聽(tīng)文件名 ?任務(wù)名
gulp.watch('css/*.css', ['csstask']);
gulp.watch('js/*.js', ['jstask']);
});
在命令中輸入嫩海，執(zhí)行上面的任務(wù)
gulp watch
