gulp入坑系列(2)——初試JS代碼合并與壓縮

標籤：string   asc   div   jsb   檔案夾   cannot   sso   img   scripts   

在上一篇裡成功安裝了gulp到項目中，現在來測試一下gulp的合并與壓縮功能

gulp入坑系列(1)——安裝gulp（傳送門）：http://www.cnblogs.com/YuuyaRin/p/6159809.html

 

在之前建立的項目中寫入，在根目錄建立js檔案夾，並在檔案夾中建立兩個js檔案，代碼如下：

index.js:

1. var index={};  
2. index={  
3.     test:function(argument){  
4.         console.log(‘test‘);  
5.     }  
6. }  
7. index.test();  

main.js:

1. var main = {};  
2. main.test=function(argument){  
3.     console.log("main test");  
4. }  
5. main.test();  

 

 

在根目錄建立檔案夾build，並在build裡建立一個空的js檔案：all.min.js

在根目錄下建立index.html ，在其中引用build下的all.min.js。

index.html:

1. <script type="text/javascript" src="build/all.min.js"></script>  

接下來編輯gulpfile.js檔案，來告訴gulp我們要把index.js，main.js合并起來壓縮再寫入all.min.js中

 

gulpfile.js:

1. var gulp = require(‘gulp‘);//gulp自身  
2. var uglify= require(‘gulp-uglify‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入壓縮組件</span>  
3. var concat = require(‘gulp-concat‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入合并組建</span>  
4.   
5. var paths = {  
6.     scripts:[‘js/index.js‘,‘js/main.js‘]  
7. } //定義要操作的檔案路徑  
8.   
9.   
10. gulp.task(‘default‘, function() {   
11.   gulp.src(paths.script)//找到項目下paths變數所定義的script檔案  
12.   .pipe(uglify())//壓縮  
13.   .pipe(concat(‘all.min.js‘))//輸入到all.min.js中  
14.   .pipe(gulp.dest(‘build‘));//指定目錄  
15. });  

 

 

tips:gulp的執行流程採用了流式操作，每一個pipe()可以理解成，上一個操作的輸出，就是下一個操作的輸入，比如uglify()壓縮後輸出的，就是concat要輸入到檔案中的，而concat輸出的檔案，是gulp.dest要加入的目錄中的，可以理解成每部操作都return了下一步要使用的東西。

 

最終目錄結構如下：

接下來就可以在命令列工具中cd到項目的根目錄中執行gulp指令了。

此時也許會出現 Cannot find module ‘gulp-uglify‘這樣的報錯，是因為gulpfile所require的gulp-uglify和gulp-concat外掛程式並不存在，所以可以利用npm在項目中裝入即可：

npm install --save-dev gulp-uglify    斷行符號

npm install --save-dev gulp-concat   斷行符號

 

安裝完成後再次執行gulp指令，成功後，可以查看一下我們原本空的all.min.js檔案，可以看到main.js和index.js已經在all.min.js中壓縮合并了

1. var index={};index={test:function(e){console.log("test")}},index.test();  
2. var main={};main.test=function(n){console.log("main test")},main.test();  

 

然後運行一下我們的index.html，開啟瀏覽器控制台，會發現兩個js的內容成功輸出：

說明gulp成功執行了JS檔案的合并與壓縮的操作。

 

gulp入坑系列(2)——初試JS代碼合并與壓縮