gulp簡單的demo入門

《gulp簡單的demo入門》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、前端們，gulp該用起來了，簡單的demo入門gulp、grunt前端自動化工具，只有用過才知道多么重要。它們問世這么久了？你真的用過嗎？寫個(gè)簡單的less、watch任務(wù)的demo分享————1.準(zhǔn)備：安裝全局node、npm，這個(gè)教程很多不作詳細(xì)介紹；新建getstart文件夾，文件夾中創(chuàng)建package.json，記得加上{}，保存2.命令提示符下，到getstart文件夾里，依次安裝node模塊：npminstall--save-devgulpnpminstall--save-dev?gulp-lessnp

2、minstall--save-dev?gulp-watchnpminstall--save-dev?require-dir???????3.根目錄新建gulpfile.js、gulp文件夾；?　gulp文件夾里再新建一個(gè)tasks文件夾和config.js文件；　tasks文件夾里創(chuàng)建default.js,less.js,watch.js。??tasks文件里存放對應(yīng)的任務(wù)、config.js配置任務(wù)的相關(guān)配置??????(1)gulpfile.js(gulp入口文件)，最基本的寫法是把所有任務(wù)配置在此文件里，我們

3、這里做一層分離，用require-dir引入gulp/tasks里的任務(wù)varrequireDir=require('require-dir');requireDir('./gulp/tasks',{recurse:true});(2)config配置:/*?gulp命令會由gulpfile.js運(yùn)行，所以src和build文件夾路徑如下（根目錄下）?*/??var?src?=?'./src';?var?dest?=?'./build';??module.exports?=?{?????less:?{???????

4、??all:?src?+?"/less/**/*.less",??//所有l(wèi)ess???(3)編寫default,默認(rèn)任務(wù)，這里默認(rèn)任務(wù)添加了less和watch任務(wù):var?gulp?=?require('gulp');??gulp.task('default',?['less','watch']);?(4)編寫less任務(wù)，這里引入了config.js配置文件，pipe()方法會依次執(zhí)行，如下首先獲取less源文件、然后編譯、最后輸出。var?gulp?=?require('gulp');?var?less?=

5、?require('gulp-less');?var?config?=?require('../config').less;??gulp.task('less',?function(){?????return?gulp.src(config.src)?????????//less源文件?????????.pipe(less(config.settings))????//執(zhí)行編譯?????????.pipe(gulp.dest(config.dest))???//輸出目錄?});?(5)編寫watch任務(wù)，var?g

6、ulp?=?require('gulp');?var?watch?=?require('gulp-watch');?var?config?=?require('../config');??gulp.task('watch',?function(){?????watch(config.less.all,?function(){??//監(jiān)聽所有l(wèi)ess?????????gulp.start('less');?????????????//出現(xiàn)修改、立馬執(zhí)行l(wèi)ess任務(wù)?????})?})?4.根目錄創(chuàng)建src->less

7、文件夾,新建需要的less文件如下：根據(jù)config配置，會編譯less文件夾里的less，如下的main.less：@import"app/a.less";@import"app/b.less";根據(jù)config配置，會編譯監(jiān)聽less里的所有文件，一旦有變化，便會執(zhí)行編譯。最終輸出到build->css里試試修改a.less，便會自動編譯了。OK，這個(gè)demo就做完了，很簡單吧！這是個(gè)非常簡單的任務(wù)，當(dāng)然我們可以用gulp做很多事情，比如壓縮圖片、壓縮代碼、合并、iconFont，配置不同的生產(chǎn)環(huán)境需要的任務(wù)：

8、deploy、staging、localhost等。真正用好了，能提升非常大的開發(fā)和維護(hù)效率。這個(gè)demo只是簡單的入門，真正學(xué)習(xí)gulp，還是要到官網(wǎng)上去學(xué)習(xí)?！揪庉嬐扑]】JavaSynDemo對象源代碼詳細(xì)介紹JavaSynDemo對象如何解決繼承問題jQueryEasyUI1.2.6源碼Demo合集50個(gè)HTML5強(qiáng)悍效果Demo集合C編程鬼話：完善M