基于gulp编写的一个简单实用的前端开发环境
自從Node.js出現(xiàn)以來,基于其的前端開發(fā)的工具框架也越來越多了,從Grunt到Gulp再到現(xiàn)在很火的WebPack,所有的這些新的東西的出現(xiàn)都極大的解放了我們?cè)谇岸祟I(lǐng)域的開發(fā),作為一個(gè)在前端領(lǐng)域里打滾了兩年的文藝小碼農(nóng)來說,也有自己的一些體會(huì),今天就來分享一下自己基于Gulp編寫的一個(gè)比較丑陋的前端開發(fā)環(huán)境,本人技術(shù)有限,有問題和意見請(qǐng)私下聊,勿噴:
首先安裝Node.js,至于怎么安裝的話 ,自行度娘。安裝完成之后在命令行里面輸入下面兩個(gè)命令,如果輸出了版本號(hào)的話(這個(gè)是我自己電腦上的版本),OK那么恭喜你安裝成功了
1 node -v v6.2.0 2 npm -v v3.8.9安裝好了Node環(huán)境后,接下來你應(yīng)該通過npm來安裝Gulp了
1 npm install gulp -g 2 -g 代表的是全局安裝,這樣你到時(shí)候再任何目錄下都可以跑gulp命令但是你會(huì)發(fā)現(xiàn)在這個(gè)過程中可能會(huì)安裝失敗,為什么呢?,作為一個(gè)IT人員,在偉大的天朝 ,你懂得...,但是也不要灰心,人是高級(jí)動(dòng)物,總歸想到辦法來解決的,這得感謝我們的馬爸爸了,因?yàn)樗奶詫殘F(tuán)隊(duì)提供了一個(gè)鏡像http://npm.taobao.org/,
在這里你可以通過改變鏡像源來快速的安裝自己所需要的東西了,這個(gè)時(shí)候一般是通過如下的命令安裝了
1 cnpm install gulp好了,安裝完Gulp后,接下來是你大展身手的時(shí)候了,在你自己的電腦上面隨便哪個(gè)地方建一個(gè)目錄,打開命令行,然后進(jìn)入創(chuàng)建好的目錄里面,開始擼代碼,關(guān)于生成的json文件請(qǐng)點(diǎn)擊這里https://docs.npmjs.com/files/package.json,打開的速度看你的網(wǎng)速了,以下是為了演示 ,我建的一個(gè)目錄結(jié)構(gòu),你自己可以根據(jù)項(xiàng)目需求自己建目
1 win+R鍵(windows平臺(tái)上)、Mac和Linux操作系統(tǒng)上,自己度娘; 2 cd yourFilename ( 進(jìn)入你的文件目錄 ) 3 npm init ( 初始化 )完了你就直接一直按回車鍵,當(dāng)看到你的目錄里面生成一個(gè)以.json格式結(jié)尾的文件時(shí),OK你的初始化就完成了接著你在根目錄下新建一個(gè)名叫g(shù)ulpfile.js的js文件,我也不知道為啥叫這個(gè)名字,反正就是這樣規(guī)定的, 先前gulp安裝是在全局環(huán)境下,
那么現(xiàn)在gulp的安裝就是在你目錄下面安裝了
1 命令行運(yùn)行 npm/cnpm install gulp --save-dev 2 --save-dev ( 你安裝的包會(huì)出現(xiàn)在你開發(fā)(dev)的依賴(Dependencies)里),這樣方便以后你的項(xiàng)目如果別人也用的話,那么那個(gè)人只要 npm/cnpm install 一下,OK所以的插件都安裝了,你不需要拷貝給他到了這一步,在編輯器中打開剛才新建的gulpfile.js文件,寫入如下的代碼進(jìn)行測(cè)試
1 var gulp = require('gulp'); 2 gulp.task('test',function(){ 3 4 console.log('gulp 測(cè)試成功了!!' 5 6 }) 7 8 在命令行運(yùn)行 gulp test 回車 如果看到了控制臺(tái)輸出了那句話,OK,你的gulp的測(cè)試成功好了到了上面這一步我們的準(zhǔn)備工作都差不多了,我們接下來就來一個(gè)一個(gè)的安裝插件,以及插件的基本使用,最后完成我們這個(gè)簡單但實(shí)用的開發(fā)環(huán)境。關(guān)于Gulp的完整使用請(qǐng)點(diǎn)擊這里http://www.gulpjs.com.cn/,這里不再講解
對(duì)于一個(gè)項(xiàng)目來說的話,通常離不開模板編譯、打包壓縮,自動(dòng)化部署等操作步驟,但是在這里我們重點(diǎn)講解前面兩項(xiàng),好了回到命令行,開始擼代碼,首先一個(gè)是html文件的編譯依賴我們第一個(gè)使用的插件是 ``gulp-content-includer gulp-rev-append``,在html文件中導(dǎo)入一些公共的模塊和為頁面中引入的js。css、img加上版本號(hào)
注意:以下是為了演示 ,我建的一個(gè)目錄結(jié)構(gòu),你自己可以根據(jù)項(xiàng)目需求自己建目錄結(jié)構(gòu)!!!!!!!!!!!!!(最后我會(huì)將源文件放到 github 上面,到時(shí)可以下載)
在根目錄下新建一個(gè)src目錄,再在src目錄下面建一個(gè)module目錄,在這個(gè)module目錄里面放不同的模塊包括公共的模塊,比如我們這里有一個(gè)登錄模塊。那么我們新建一個(gè)login文件夾,里面放與登錄相關(guān)的頁面和靜態(tài)文件,可能還會(huì)用到一些公共的,那么我們?cè)俳ㄒ粋€(gè)公共的文件夾叫public,這里面放公共的文件夾如圖所示:
public目錄下面我們新建了幾個(gè)文件夾分別用來放公共的css、images、js、html,我們?cè)趌ogin模塊下新建一個(gè)index.html文件,分別引入頭部和底部,如圖所示:
在命令行運(yùn)行: gulp html 完了后會(huì)在目錄下多出一個(gè)文件,打開剛才編譯過的html文件你會(huì)看到完整的編譯成功 如圖所示
那大家會(huì)問.pipe(rev())這個(gè)是干嘛的呢,這個(gè)是為js、css、img添加文件版本號(hào)的,如下圖所示,
我們會(huì)發(fā)現(xiàn)引入的文件后面都多了一個(gè)版本號(hào)了,這個(gè)是為了防止瀏覽器產(chǎn)生緩存,只要文件改變,hash值會(huì)自動(dòng)變,至此我們的第一個(gè)插件搞定
Html完了的話,應(yīng)該是輪到css了吧,網(wǎng)上有很多都是關(guān)于怎么樣用gulp去編譯sass等文件,這里我要講的是我們postcsss 點(diǎn)擊去學(xué)習(xí)postcss吧http://www.w3cplus.com/blog/tags/516.html,去編寫我們的css,然后編譯,廢話不多說,上代碼
我們第二個(gè),當(dāng)然不止了,需要很多個(gè)配合使用 ``gulp-postcss(主要依賴模塊) cssnex(使用CSS未來的語法) precss(編寫Sass的函數(shù)) gulp-autoprefixer(處理瀏覽器私有前綴)gulp-sourcemaps(用于錯(cuò)誤查找) gulp-minify-css(壓縮css)
1 命令行: npm/cnpm install gulp-postcss cssnex precss gulp-autoprefixer gulp-minify-css gulp-sourcemaps --save-dev2 3 在gulpfile.js 寫如下的代碼:4 5 gulp.task('css', function () {6 7 var processors = [8 9 autoprefixer, 10 11 cssnext, 12 13 precss 14 ]; 15 gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css']) 16 .pipe(postcss(processors)) 17 .pipe(autoprefixer({ 18 browsers: ['last 2 versions', 'Android >= 4.0'], 19 cascade: true 20 })) 21 .pipe(gulp.dest('dest/')) 22 .pipe(browserSync.stream()); 23 }) 24我們?cè)趌ogin模塊下面新建一個(gè)css文件如圖所示,寫上代碼
在命令行運(yùn)行: gulp css 在dest目錄下打開剛才編譯成功的樣式文件 如圖所示編譯成功
上面只搞定了編譯,那還有壓縮,錯(cuò)誤定位怎么辦。我們?cè)侔褎偛诺拇a稍微改一下
1 gulp.task('css', function () {2 var processors = [3 autoprefixer,4 cssnext,5 precss6 ];7 gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])8 .pipe(postcss(processors))9 .pipe(autoprefixer({ 10 browsers: ['last 2 versions', 'Android >= 4.0'], 11 cascade: true 12 })) 13 .pipe(minifycss()) 14 .pipe(sourcemaps.init()) 15 .pipe(sourcemaps.write()) 16 .pipe(gulp.dest('dest/')) 17 .pipe(browserSync.stream()); 18 }) 19 我們?cè)俅尉幾g你會(huì)發(fā)現(xiàn)生成的文件變了,變成下面這個(gè)樣子了,要的就是這個(gè)效果到此,css部分完成了,CSS部分完成了,該輪到JS了吧,js部分我主要依賴于這幾個(gè)插件 `` gulp-babel(編譯es6語法) gulp-uglify(壓縮js)``
1 命令行: npm/cnpm install gulp-babel gulp-uglify --save-dev2 3 在gulpfile.js 寫如下的代碼:4 5 gulp.task('js', function () { 6 gulp.src(['src/module/**/js/*.js','!src/module/public/js/*.js']) 7 .pipe(babel({ 8 presets: ['es2015'] 9 })) 10 .pipe(uglify({ 11 mangle: true, //fasle不混淆變量名 true為混淆 12 preserveComments: 'some' //不刪除注釋,還可以為 false(刪除全部注釋),some(保留@preserve @license @cc_on等注釋) })) 13 .pipe(gulp.dest('dest/')) 14 .pipe(browserSync.stream()) 15 .pipe(browserSync.stream()); 16 });我們?cè)趌ogin模塊下面新建一個(gè)js文件如圖所示,寫上如圖代碼
在命令行運(yùn)行: gulp js 在dest目錄下打開剛才編譯成功的樣式文件 如圖所示
出現(xiàn)這樣的結(jié)果就成功了,是不是覺得很簡單啊
現(xiàn)在該輪到了圖片了吧,圖片也很簡單,我們只用到了一個(gè)插件``gulp-imagemin( 圖片壓縮 )``
1 命令行: npm/cnpm install gulp-imagemin --save-dev2 3 在gulpfile.js 寫如下的代碼:4 5 gulp.task('images', function () {6 gulp.src(['src/module/**/images/*.*','src/module/public/images/*.*'])7 .pipe(imagemin({8 optimizationLevel: 3,9 interlaced: true, 10 progressive: true 11 })) 12 .pipe(gulp.dest('dest/')) 13 .pipe(browserSync.stream()); 14 }); 15 16 17 在login目錄下放入一張圖片,然后命令行運(yùn)行 gulp images 然后對(duì)比壓縮前后圖片的大小,就知道有沒有成功了拷貝public下面不需要編譯的一些庫和插件:
在項(xiàng)目中我們通常會(huì)依賴一些插件和js庫,通常這些文件都是被編譯壓縮過后的,不需要再次編譯壓縮,所以我們直接拷貝過去就可以
不知道大家有沒有注意,每一個(gè)任務(wù)后面的加上了.pipe(browserSync.stream());這個(gè)是干嘛的呢,這就是接下來我們要講到的,到這里是不是就完了呢?當(dāng)然沒有,我們寫代碼的時(shí)候不可能每次都去手動(dòng)編譯吧,那個(gè)太LOW了,我們要自動(dòng)監(jiān)聽文件的編譯壓縮,對(duì),就是這樣
文件的自動(dòng)編譯壓縮監(jiān)聽服務(wù)`browser-sync:http://www.browsersync.cn/
文件的譯壓縮監(jiān)聽服務(wù)我們依賴于``browser-sync(實(shí)時(shí)刷新)``這個(gè)插件通過這個(gè)插件我們可以在本地開啟一個(gè)小的服務(wù)環(huán)境,每當(dāng)文件改變的時(shí)候 ,就會(huì)自動(dòng)處理,具體的使用請(qǐng)點(diǎn)擊上面的鏈接,時(shí)間的原因就不在一一描述了
?
1 命令行: npm/cnpm install browser-sync --save-dev2 3 在gulpfile.js 寫如下的代碼:4 5 gulp.task('serve', ['css',"html","copyJs","js","images"], function() {6 browserSync.init({7 server: "./dest"8 });9 gulp.watch("src/module/**/css/*.scss", ['css']); 10 gulp.watch("src/module/**/*.html", ['copyHtml']); 11 gulp.watch("src/module/public/**/*", ['copyJs']); 12 gulp.watch("src/module/**/js/*.js", ['js']); 13 gulp.watch("src/module/**/images/*.*", ['images']); 14 gulp.watch("*.html").on('change', browserSync.reload); 15 });?
到這里為止我們就差不多了,最后還有一個(gè)收尾工作,那就是用一個(gè)命令運(yùn)行所有的任務(wù),代碼如下:
?
gulp.task('default', ['serve'])前端工程話要做的事情有很多,不只是上面一點(diǎn)點(diǎn),我作為一個(gè)剛?cè)腴T的前端工程師花點(diǎn)時(shí)間來寫這個(gè)東西,只是為了和大家共勉,后期我會(huì)繼續(xù)完善代碼,最后附上源代碼https://github.com/huangzexia/gulp,更多問題請(qǐng)給我發(fā)郵件(huangzexiameishu@163.com),在github上下載下來后按照下面的命令
代碼運(yùn)行:
1、運(yùn)行npm install
2、運(yùn)行g(shù)ulp
3、在瀏覽器中輸入http://localhost:3000/login/index.html```
總結(jié)
以上是生活随笔為你收集整理的基于gulp编写的一个简单实用的前端开发环境的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 关于ThreadLocal
- 下一篇: HTML 字符实体 参考手册