gulp入門演練

一直想學習下gulp看了蠻多資料，而後老是感受是是而非，忽然開竅了，把本身學會的過程給你們分享下，入門超級簡單的

gulp安裝

• 安裝gulp 若是參數-g 表示全局安裝

  $ npm install gulp

  $ npm install gulp --save-dev

咱們先來學習壓縮JS文件，新建文件目錄以下 

 

dist爲解壓後文件放置的目錄（可自定義）

src爲要解壓的文件放置目錄（可自定義）

gulpfile.js: gulp的配置文件，在根目錄中

 

壓縮思路一、找到要壓縮的JS目錄  src/app.js

　　　　二、壓縮這些文件

           三、把壓縮好的文件放置到壓縮文件目錄//dist

 

執行步驟一、安裝壓縮文件的插件  gulp-uglify模塊

　　　　二、cpm install  gulp-uglify

　　　　三、再根目錄下創建 gulpfile.js文件

gulpfile.js代碼以下

　　　var gulp = require('gulp'),　

　　　uglify = require('gulp-uglify'); 　　　　

 　　  gulp.task('default', function(){

　　　 gulp.src('src/app.js')//找到src下面的app.js

　　　 .pipe(uglify())//對着js進行壓縮

　　　 .pipe(gulp.dest('dist/'));//把壓縮的文件放置到dist文件目錄下
});

 

配置完成：執行壓縮任務

再命令行輸入：gulp 或者gulp default //defaule== gulp.task('default', function()這裏這個命名

在dist/js/下就能看壓縮後的文件了

 

 

表達有限 若是須要交流能夠加入前端開發羣 425019975 一塊兒交流學習

　　參考地址 　　　　　　　　gulp官網 https://github.com/gulpjs/gulp

　　其餘參考網站                   https://github.com/nimojs/gulp-book/blob/master/chapter1.md