[TOC] # 準備工作 最開始，當然要先安裝node和npm，然后新建自己的項目（ps：項目名不能是‘gulp’）， 然后初始化一下： npm init -y 生成packge.json 首先我們來看一下項目的目錄結構： ``` 如圖： 目錄css、images、js都是你項目原本的文件目錄 而dist目錄以及目錄下的css、images、js目錄就是將文件壓縮后存放到的相應目標目錄 接下來，就可以進入正題了 ``` # 安裝gulp 在你的項目目錄下打開命令行界面 首先要全局安裝一下gulp，輸入： npm i -g gulp 然后，要把gulp安裝到本地： npm i -D gulp # 編寫gulpfile.js文件 首先在項目目錄下新建一個gulpfile.js文件： # 導包 引入所需要的包： ``` var gulp = require('gulp'); var uglify = require('gulp-uglify'); ////用于壓縮js文件 var minifyCSS = require('gulp-minify-css'); ////用于壓縮css文件 var imagemin = require('gulp-imagemin'); ////用于壓縮image文件 gulp-uglify、gulp-minify-css、gulp-imagemin需要在本地安裝一下， ``` 同理在項目目錄下打開命令行界面，輸入相應命令： ``` npm i -D gulp-uglify npm i -D gulp-minify-css npm i -D gulp-imagemin ``` 安裝成功后，繼續在gulpfile.js中寫代碼： 新建壓縮任務 ``` /////新建一個‘script’任務 /////用于壓縮js文件 gulp.task('script',function(){ /////找到需要壓縮的文件 gulp.src('js/**/*.js') //// /**/ 表示js目錄下的任意層級的目錄 /////壓縮文件 .pipe(uglify()) /////另存壓縮后文件 .pipe(gulp.dest('dist/js')); }); ``` 同理，也可以新建壓縮css、images文件的任務： ``` gulp.task('css',function(){ gulp.src('css/**/*.css') .pipe(minifyCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('images',function(){ gulp.src('images/**/*.*') .pipe(imagemin({progressive:true})) .pipe(gulp.dest('dist/images')); }); ``` 到此，壓縮的任務就完成了，在命令行界面可以輸入 ‘gulp’ 空格 任務名稱 來執行壓縮，例如： ``` gulp script ``` 執行完成后，在dist目錄的相應目錄下可以找到壓縮后的文件 # 自動壓縮任務 在默認情況下，我們每次修改文件都要去執行壓縮任務才能得到壓縮后的文件， 為了方便，我們使用watch方法來新建一個監聽任務，每次修改文件，系統會自動執行壓縮： ``` gulp.task('auto',function(){ ////////監聽文件，當文件被修改后自動執行壓縮任務 ////////第一個參數：監聽的目標文件 ///////第二個參數：監聽到修改后執行的壓縮任務 gulp.watch('js/**/*.js',['script']); gulp.watch('css/**/*.css',['css']); gulp.watch('images/**/*.*',['images']); }); ``` 默認任務 ``` /////////定義默認任務,使用gulp 啟動數組里的所有任務 gulp.task('default',['images','css','script','auto']); ``` 新建默認任務后，在命令行執行： ``` gulp ``` 即可執行所有數組中的任務