基於gulp編寫的一個簡單實用的前端開發環境

時間 2019-11-08

標籤基於 gulp 編寫一個簡單實用前端開發環境欄目 JavaScript 简体版

原文原文鏈接

自從Node.js出現以來，基於其的前端開發的工具框架也愈來愈多了，從Grunt到Gulp再到如今很火的WebPack，全部的這些新的東西的出現都極大的解放了咱們在前端領域的開發，做爲一個在前端領域裏打滾了兩年的文藝小碼農來講，也有本身的一些體會，今天就來分享一下本身基於Gulp編寫的一個比較醜陋的前端開發環境，本人技術有限，有問題和意見請私下聊，勿噴：css

　　首先安裝Node.js,至於怎麼安裝的話，自行度娘。安裝完成以後在命令行裏面輸入下面兩個命令，若是輸出了版本號的話（這個是我本身電腦上的版本），OK那麼恭喜你安裝成功了html

1 node -v   v6.2.0
2 npm  -v   v3.8.9

安裝好了Node環境後，接下來你應該經過npm來安裝Gulp了前端

1 npm install gulp -g
2 -g 表明的是全局安裝，這樣你到時候再任何目錄下均可以跑gulp命令

可是你會發如今這個過程當中可能會安裝失敗，爲何呢？，做爲一個IT人員，在偉大的天朝，你懂得...，可是也不要灰心，人是高級動物，總歸想到辦法來解決的，這得感謝咱們的馬爸爸了，由於他的淘寶團隊提供了一個鏡像http://npm.taobao.org/，node

在這裏你能夠經過改變鏡像源來快速的安裝本身所須要的東西了，這個時候通常是經過以下的命令安裝了git

1 cnpm install gulp

好了，安裝完Gulp後，接下來是你大展身手的時候了，在你本身的電腦上面隨便哪一個地方建一個目錄，打開命令行，而後進入建立好的目錄裏面，開始擼代碼,關於生成的json文件請點擊這裏https://docs.npmjs.com/files/package.json，打開的速度看你的網速了,如下是爲了演示，我建的一個目錄結構，你本身能夠根據項目需求本身建目es6

1 win+R鍵（windows平臺上）、Mac和Linux操做系統上，本身度娘；
2 cd yourFilename （ 進入你的文件目錄 ）
3 npm init ( 初始化 )

完了你就直接一直按回車鍵，當看到你的目錄裏面生成一個以.json格式結尾的文件時，OK你的初始化就完成了接着你在根目錄下新建一個名叫gulpfile.js的js文件，我也不知道爲啥叫這個名字，反正就是這樣規定的，先前gulp安裝是在全局環境下，github

那麼如今gulp的安裝就是在你目錄下面安裝了npm

1 命令行運行 npm/cnpm install gulp  --save-dev
2 --save-dev ( 你安裝的包會出如今你開發(dev)的依賴(Dependencies)裏),這樣方便之後你的項目若是別人也用的話，那麼那我的只要 npm/cnpm install 一下,OK因此的插件都安裝了，你不須要拷貝給他

到了這一步，在編輯器中打開剛纔新建的gulpfile.js文件，寫入以下的代碼進行測試json

1 var gulp = require('gulp');
2 gulp.task('test',function(){
3 
4      console.log('gulp 測試成功了!!'
5 
6  })
7 
8 在命令行運行 gulp test 回車 若是看到了控制檯輸出了那句話，OK,你的gulp的測試成功

好了到了上面這一步咱們的準備工做都差很少了，咱們接下來就來一個一個的安裝插件，以及插件的基本使用，最後完成咱們這個簡單但實用的開發環境。關於Gulp的完整使用請點擊這裏http://www.gulpjs.com.cn/,這裏再也不講解
對於一個項目來講的話，一般離不開模板編譯、打包壓縮，自動化部署等操做步驟，可是在這裏咱們重點講解前面兩項，好了回到命令行，開始擼代碼，首先一個是html文件的編譯依賴咱們第一個使用的插件是 ``gulp-content-includer gulp-rev-append``,在html文件中導入一些公共的模塊和爲頁面中引入的js。css、img加上版本號gulp

 1 命令行: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 寫以下的代碼:
 2 var gulp = require('gulp');//  引入 gulp
 3 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+"([^"]+)"\-\->/g
 9      }))
10      .pipe(rev())
11      .pipe(gulp.dest('dest/'))
12      .pipe(browserSync.stream());
13 });

注意:如下是爲了演示，我建的一個目錄結構，你本身能夠根據項目需求本身建目錄結構！！！！！！！！！！！！！（最後我會將源文件放到 github 上面，到時能夠下載）

在根目錄下新建一個src目錄，再在src目錄下面建一個module目錄，在這個module目錄裏面放不一樣的模塊包括公共的模塊，好比咱們這裏有一個登陸模塊。那麼咱們新建一個login文件夾，裏面放與登陸相關的頁面和靜態文件，可能還會用到一些公共的，那麼咱們再建一個公共的文件夾叫public，這裏面放公共的文件夾如圖所示:

public目錄下面咱們新建了幾個文件夾分別用來放公共的css、images、js、html，咱們在login模塊下新建一個index.html文件，分別引入頭部和底部,如圖所示:

在命令行運行: gulp html 完了後會在目錄下多出一個文件，打開剛纔編譯過的html文件你會看到完整的編譯成功如圖所示

那你們會問.pipe(rev())這個是幹嗎的呢，這個是爲js、css、img添加文件版本號的，以下圖所示，

咱們會發現引入的文件後面都多了一個版本號了，這個是爲了防止瀏覽器產生緩存，只要文件改變，hash值會自動變，至此咱們的第一個插件搞定

Html完了的話，應該是輪到css了吧，網上有不少都是關於怎麼樣用gulp去編譯sass等文件，這裏我要講的是咱們postcsss 點擊去學習postcss吧http://www.w3cplus.com/blog/tags/516.html，去編寫咱們的css，而後編譯，廢話很少說，上代碼

咱們第二個，固然不止了，須要不少個配合使用 ``gulp-postcss（主要依賴模塊） cssnex（使用CSS將來的語法） precss（編寫Sass的函數） gulp-autoprefixer（處理瀏覽器私有前綴）gulp-sourcemaps（用於錯誤查找） gulp-minify-css（壓縮css）

 1 命令行: npm/cnpm install gulp-postcss cssnex precss  gulp-autoprefixer gulp-minify-css gulp-sourcemaps  --save-dev
 2 
 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

咱們在login模塊下面新建一個css文件如圖所示，寫上代碼

在命令行運行: gulp css 在dest目錄下打開剛纔編譯成功的樣式文件如圖所示編譯成功

上面只搞定了編譯，那還有壓縮，錯誤定位怎麼辦。咱們再把剛纔的代碼稍微改一下

 1 gulp.task('css', function () {
 2      var processors = [
 3         autoprefixer,
 4         cssnext,
 5        precss
 6     ];
 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 咱們再次編譯你會發現生成的文件變了，變成下面這個樣子了，要的就是這個效果

到此，css部分完成了,CSS部分完成了，該輪到JS了吧，js部分我主要依賴於這幾個插件 `` gulp-babel（編譯es6語法） gulp-uglify（壓縮js）``

 1 命令行: npm/cnpm install gulp-babel gulp-uglify  --save-dev
 2 
 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        });

咱們在login模塊下面新建一個js文件如圖所示，寫上如圖代碼

在命令行運行: gulp js 在dest目錄下打開剛纔編譯成功的樣式文件如圖所示

出現這樣的結果就成功了，是否是以爲很簡單啊

如今該輪到了圖片了吧，圖片也很簡單，咱們只用到了一個插件``gulp-imagemin( 圖片壓縮 )``

 1 命令行: npm/cnpm install gulp-imagemin  --save-dev
 2 
 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目錄下放入一張圖片，而後命令行運行 gulp images 而後對比壓縮先後圖片的大小，就知道有沒有成功了

拷貝public下面不須要編譯的一些庫和插件:

在項目中咱們一般會依賴一些插件和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     });

不知道你們有沒有注意,每個任務後面的加上了.pipe(browserSync.stream())；這個是幹嗎的呢，這就是接下來咱們要講到的，到這裏是否是就完了呢？固然沒有，咱們寫代碼的時候不可能每次都去手動編譯吧，那個太LOW了，咱們要自動監聽文件的編譯壓縮，對，就是這樣

文件的自動編譯壓縮監聽服務`browser-sync：http://www.browsersync.cn/

文件的譯壓縮監聽服務咱們依賴於``browser-sync(實時刷新)``這個插件經過這個插件咱們能夠在本地開啓一個小的服務環境，每當文件改變的時候，就會自動處理，具體的使用請點擊上面的連接，時間的緣由就不在一一描述了

 1 命令行: npm/cnpm install browser-sync  --save-dev
 2 
 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     });

到這裏爲止咱們就差很少了，最後還有一個收尾工做，那就是用一個命令運行全部的任務，代碼以下：

gulp.task('default', ['serve'])

前端工程話要作的事情有不少，不僅是上面一點點，我做爲一個剛入門的前端工程師花點時間來寫這個東西，只是爲了和你們共勉，後期我會繼續完善代碼，最後附上源代碼https://github.com/huangzexia/gulp，更多問題請給我發郵件（huangzexiameishu@163.com），在github上下載下來後按照下面的命令

代碼運行：

一、運行npm install

二、運行gulp

三、在瀏覽器中輸入http://localhost:3000/login/index.html```