自從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)

1 命令行: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 寫如下的代碼:2 var gulp = require('gulp');// 引入 gulp3 var contentIncluder = require('gulp-content-includer')4 var rev = require('gulp-rev-append');5 gulp.task('html', function() {6 gulp.src(['src/module/**/*.html','!src/module/public/html/*.html'])7 .pipe(contentIncluder({8 includerReg:/<!\-\-include\s+"([^"]+)"\-\->/g9 })) 10 .pipe(rev()) 11 .pipe(gulp.dest('dest/')) 12 .pipe(browserSync.stream()); 13 });

注意:以下是為了演示 ，我建的一個(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庫，通常這些文件都是被編譯壓縮過后的，不需要再次編譯壓縮，所以我們直接拷貝過去就可以

1 gulp.task('copyJs', function() { 2 gulp.src('src/module/public/js/**/*',{base: 'src/module/public/'}) 3 .pipe(uglify({ 4 mangle: true, //fasle不混淆變量名 true為混淆 5 preserveComments: 'some' //不刪除注釋，還可以為 false（刪除全部注釋），some（保留@preserve @license @cc_on等注釋） 6 })) 7 .pipe(gulp.dest('dest/public')) 8 .pipe(browserSync.stream()); 9 });

不知道大家有沒有注意,每一個(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。