在上一篇裏成功安裝了gulp到項目中,現在來測試一下gulp的合併與壓縮功能
gulp入坑系列(1)——安裝gulp(傳送門):http://blog.csdn.net/u013034014/article/details/53543223
在之前建立的項目中寫入,在根目錄新建js文件夾,並在文件夾中新建兩個js文件,代碼如下:
index.js:
var index={};
index={
test:function(argument){
console.log('test');
}
}
index.test();
main.js:
var main = {};
main.test=function(argument){
console.log("main test");
}
main.test();
在根目錄下新建index.html ,在其中引用build下的all.min.js。
index.html:
<script type="text/javascript" src="build/all.min.js"></script>
接下來編輯gulpfile.js文件,來告訴gulp我們要把index.js,main.js合併起來壓縮再寫入all.min.js中
gulpfile.js:
var gulp = require('gulp');//gulp自身
var uglify= require('gulp-uglify');//引入壓縮組件
var concat = require('gulp-concat');//引入合併組建
var paths = {
scripts:['js/index.js','js/main.js']
} //定義要操作的文件路徑
gulp.task('default', function() {
gulp.src(paths.script)//找到項目下paths變量所定義的script文件
.pipe(uglify())//壓縮
.pipe(concat('all.min.js'))//輸入到all.min.js中
.pipe(gulp.dest('build'));//指定目錄
});
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中壓縮合並了
var index={};index={test:function(e){console.log("test")}},index.test();
var main={};main.test=function(n){console.log("main test")},main.test();
說明gulp成功執行了JS文件的合併與壓縮的操作。