一點(diǎn)點(diǎn)前言
之前用過下面這兩款跨平臺軟件晰骑，感覺功能相對比較局限按灶。
修修補(bǔ)補(bǔ)了幾天終于把gulp搭建起來了徘跪，這次終于像樣了些筹误，至少比前面兩款工具拓展了不少思犁，gulp的強(qiáng)大之處不用多說驻子，非常值得把玩。先來看看這次主要實(shí)現(xiàn)了哪些功能吧牡彻！
- Sass語法編譯扫沼；
- 靜態(tài)資源壓縮（包含html,css,js以及img）；
- Css3自動前綴
- Image Sprite（圖片精靈）
- md5后綴添加
- 路由及文件合并
- 頁面模塊iclude功能
- 瀏覽器同步刷新
這次就是為了實(shí)現(xiàn)第7個iclude功能很是花費(fèi)了一番功夫庄吼。
首先gulp環(huán)境搭建缎除。
1.默認(rèn)安裝好Node,首先全局安裝gulp
$ npm install --global gulp
2.建議安裝淘寶鏡像cnpm，相比下載快的不是一點(diǎn)點(diǎn)总寻。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3.下載hello-gulp'
$ git@github.com:kpengWang/hello-gulp.git
4.直接安裝所有packge里所有插件
$ cnpm install
至此依賴安裝完成顯示
一點(diǎn)小提示:
- 命令行里“--global”可以簡寫為“-g”
- "install" 可以直接用一個“i”代替
- 例如全局安裝gulp 可以直接用" npm i --g gulp"
基本介紹
如果需要看gulp的簡介器罐，可以看看前端構(gòu)建工具gulpjs的使用介紹及技巧，
這里為了能直接上手渐行，不做過多贅述轰坊，先來看看默認(rèn)目錄各個文件目錄的作用。
在依賴完依賴后祟印，會多一個“node_modules”文件夾肴沫，里面放的都是我們需要用到的對應(yīng)版本依賴，在windows開發(fā)環(huán)境會發(fā)現(xiàn)很多“多余的”依賴蕴忆，那是因?yàn)閚pm升到3之后颤芬，所有的依賴模塊被拍扁了，全都放在一個目錄下套鹅。
實(shí)際用法
在gulpfile.js最后分別放了三個task站蝠。
// Dev Sequences
gulp.task('dev', function(callback) {
runSequence(
'clean:dev', ['include', 'sprite', 'sass', 'minifyJs', 'minifyFont'],
'clean:include',
callback
);
});
// Build Sequences
// ---------------
gulp.task('build', function(callback) {
runSequence(
'clean:dist', ['usemin', 'images:dist', 'fonts:dist'], 'rev', 'minifyHtml',
callback
);
});
// Default Sequences
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync'], 'watch',
callback
);
});
1- gulp
1.在終端執(zhí)行gulp，瀏覽器會自動打開一個靜態(tài)服務(wù)器地址
$ gulp
瀏覽器會自動打開localhost:3000并產(chǎn)生如下頁面芋哭， 此時這里的include頁面還沒有編譯沉衣，因?yàn)槲覍⑺纸獾较乱粋€動作里，也就是我們的生產(chǎn)環(huán)境里减牺。
2.在終端執(zhí)行gulp dev豌习，會自動生成一個dev文件夾,這里做靜態(tài)資源壓縮存谎，同時編譯對應(yīng)的"include"模版。
2- gulp dev
$ gulp dev
dev目錄里的index.html DOM結(jié)構(gòu)及頁面如下
3- gulp build
3.最后執(zhí)行gulp build 命令肥隆，會產(chǎn)生應(yīng)該dist 文件夾既荚，這也是我們最終上線版本，做更極致一些處理栋艳，會做靜態(tài)資源(css和js)合并恰聘，響應(yīng)鏈接加上md5后綴。
此時index.html 會如圖吸占。
