[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 ``` 即可执行所有数组中的任务