gulp是基于node实现的，所以我们需要先安装node。下载节点地址：打开https://nodejs.org/点击绿色的INSTALL按钮下载安装节点。安装好node之后，我们开始安装gulp。1、安装gulpnpm是node的包管理工具，可以用它来安装gulp需要的包。（安装node时已经自动安装了npm）首先新建一个文件夹news，打开GitBashHere，在命令行输入：npminstall-ggulp如果一直没有安装成功，请使用cnpm安装（npm的国产加速镜像)二、安装依赖在命令行输入：npminstallnpminit-ynpmi-Dgulpnpmi-Dgulp-uglify三、压缩文件1、压缩JS文件(1)。在新闻文件夹中创建一个新的“gulpfile.js”文件。;(2)、在'gulpfile.js'中编写代码，//获取gulp:vargulp=require('gulp');(3)获取'gulp-uglify'组件：varuglify=require('gulp-uglify')(4)创建压缩任务//压缩js文件gulp.task('script',function(){//1.查找文件gulp.src('js/*.js')//2.压缩文件。pipe(uglify())//3.将压缩文件另存为另一个文件。pipe(gulp.dest('dist/js'))})(5)、跳转到gulpfile.js所在目录(6)、使用命令Task运行脚本在控制台输入gulp任务名运行任务，这里我们输入gulpscript并按下进入。注意：进入gulpscript后，命令行会提示错误信息//EntergulpscriptError:Cannotfindmodule'gulp-uglify'atFunction.Module._resolveFilename(module.js:338:15)atFunction.Module。_load(module.js:280:25)Cannotfindmodule'gulp-uglify'找不到gulp-uglify模块。（7）安装gulp-uglify模块使用npm安装gulp-uglify到本地npminstallgulp-uglify然后进入gulp脚本执行任务（8）编写js文件我们发现gulp并没有进行任何压缩操作。因为没有js目录，而且js目录下也没有.js后缀的文件。创建一个.js文件，写入如下内容//a.jsfunctiondemo(msg){alert('--------\r\n'+msg+'\r\n--------')}demo('Hi')然后在命令行输入gulp脚本执行任务。Gulp会在命令行的当前目录下创建dist/js/文件夹，并创建一个压缩的a.js文件。(9)、检测代码修改并自动执行任务在'gulpfile.js'中写入如下代码//监听文件修改，当文件被修改时，执行脚本任务gulp.watch('js/*.js',['script']);//在命令行使用gulpauto来启动这个任务gulp.task('auto',function(){//监听文件修改，当文件被修改时执行脚本任务gulp.watch('js/*.js',['script'])})然后在命令行输入gulpauto自动监听js/*.js文件的修改并压缩js。$gulpauto[21:09:45]使用gulpfile~/Documents/code/gulp-book/demo/chapter2/gulpfile.js[21:09:45]开始“自动”...[21:09:45]9.19ms后完成'auto'此时，修改js/a.js中的代码并保存。命令行会出现提示，提示检测到文件修改，文件将被压缩。[21:11:01]Starting'script'...[21:11:01]2.85ms后完成'script'至此，我们完成了gulp压缩js文件的自动代码编写。2、压缩css文件（一），安装gulp-minify-css模块，在命令行输入npminstallgulp-minify-css（二），参考使用gulp压缩JS创建gulpfile.js文件并编写代码//获取gulpvargulp=require('gulp')//获取minify-css模块（用于缩小CSS）varminifyCSS=require('gulp-minify-css')//缩小css文件//使用gulpcss在命令行启动这个任务gulp.task('css',function(){//1.找到文件gulp.src('css/*.css')//2.压缩文件.pipe(minifyCSS())//3.另存为压缩文件.pipe(gulp.dest('dist/css'))})//在命令行上使用gulpauto启动这个任务gulp.task('auto',function(){//监听文件修改，文件修改时执行cssTaskgulp.watch('css/*.css',['css'])});//使用gulp.task('default')定义默认任务//使用gulp在命令行启动css任务和auto任务gulp.task('default',['css','auto'])(3)创建css文件在gulpfile.js对应目录下创建一个css文件夹，在css/目录下创建一个.css文件。/*a.css*/bodya{color:pink;}(4)、运行gulp查看效果，在命令行输入gulp+回车，在命令行会看到如下提示gulp[17:01:19]使用gulpfile~/Documents/code/gulp-book/demo/chapter3/gulpfile.js[17:01:19]开始'css'...[17:01:19]在之后完成'css'6.21毫秒[17:01:19]开始“自动”...[17:01:19]5.42毫秒后完成“自动”[17:01:19]开始“默认”...[17:01:19]在5.71μsgulp之后完成'default'将创建dist/css目录并创建一个.css文件，其中存储压缩的css代码。3、压缩images文件(1)、安装gulp-imagemin模块提示：安装启动gulp前需要先使用命令行cd切换到对应目录。在命令行输入npminstallgulp-imagemin(2)，创建gulpfile.js文件并编写代码在相应目录下创建gulpfile.js文件，写入如下内容：//getgulpvargulp=require('gulp');//获取gulp-imagemin模块varimagemin=require('gulp-imagemin')//压缩图像任务//在命令行输入gulpimages来启动这个任务gulp.task('images',function(){//1.找到图像gulp.src('images/*.*')//2.压缩图像.pipe(imagemin({progressive:true}))//3.保存图像.pipe(gulp.dest('分布/图像'))});//在命令行使用gulpauto启动这个任务gulp.task('auto',function(){//监听文件修改，当文件被修改时执行images任务gulp.watch('images/*.*)'，['图片']）}）;//使用gulp.task('default')定义默认任务//使用gulp在命令行启动images任务和auto任务gulp.task('default',['images','auto'])(3)、将图片存放在images/目录下在gulpfile.js对应目录下创建一个images文件夹，将图片存放在images/目录下。(4)运行gulp查看效果。在命令行输入gulp+enter，会在命令行看到如下提示：gulp[18:10:42]Usinggulpfile~/Documents/code/gulp-book/demo/chapter4/gulpfile.js[18:10:42]开始“图像”...[18:10:42]5.72毫秒后完成“图像”[18:10:42]开始“自动”...[18:10:42]完成“自动”'在6.39毫秒后[18:10:42]开始“默认”...[18:10:42]在5.91微秒后完成“默认”[18:10:42]gulp-imagemin：缩小3张图像（保存25.83kB-5.2%)4.压缩less文件(1)。安装gulp-less模块??提示：安装启动gulp前需要先使用命令行cd切换到对应目录。在命令行输入npminstallgulp-less(2)，创建gulpfile.js文件并编写代码在相应目录下创建gulpfile.js文件，写入如下内容：//Getgulpvargulp=require('gulp')//获取gulp-less模块varless=require('gulp-less')//编译less//在命令行中输入gulpless来启动这个任务gulp.task('less',function(){//1.找到less文件gulp.src('less/**.less')//2.编译成css.pipe(less())//3.保存为file.pipe(gulp.dest('dist/较少的'））}）;//在命令行使用gulpauto启动这个任务gulp.task('auto',function(){//监听文件修改，当文件被修改时，执行less任务gulp.watch('less/**.less',['less'])})//使用gulp.task('default')定义默认任务//使用gulp在命令行启动less任务和auto任务gulp.task('default',['less','auto'])(3)创建less文件在gulpfile.js对应目录下创建一个less文件夹，在less/目录下创建一个.less文件。/*a.less*/.import{a{颜色：红色；}}(4)、运行gulp查看效果在命令行输入gulp+entergulpcompressedlessfileis.importa{color:red;}5.压缩sass文件本章使用ruby-sass。如果不方便安装ruby或者编译速度慢，推荐使用gulp-sass。请在理解以下章节后阅读本章：【安装Node和gulp】【使用gulp压缩JS】Sass是一个CSS开发工具，提供了很多方便的编写方法，大大节省了开发者的时间，使CSS开发变得简单易维护。本章使用ruby-sass编译css。如果没有安装ruby和sass，请使用ruby.taobao安装Sass（一），安装gulp-ruby-sass模块提示：需要先使用命令行cd切换到对应目录再进行安装操作和gulp启动操作。在命令行输入npminstallgulp-ruby-sass(2)，创建gulpfile.js文件并编写代码在相应目录下创建gulpfile.js文件，写入如下内容：//getgulpvargulp=require('gulp')//获取gulp-ruby-sass模块varsass=require('gulp-ruby-sass')//编译sass//在命令行输入gulpsass启动这个任务gulp.task('sass',function(){returnsass('sass/**.scss').on('error',function(err){console.error('Error!',err.message);}).pipe(gulp.dest('dist/sass'))});//在命令行使用gulpauto启动这个任务gulp.task('auto',function(){//监听文件修改，当文件被修改时，执行images任务gulp.watch('sass/**/*.scss',['sass'])});//使用gulp.task('default')定义默认任务//使用gulp在命令行启动sass任务和自动任务gulp.task('default',['sass','auto'])(3),创建sass文件在gulpfile.js对应目录下创建sass文件夹，在less/目录下创建.scss文件。/*a.scss*/.import{a{颜色：红色；}}(4)、运行gulp查看效果，在命令行输入gulp+回车，gulp压缩后的sass文件为.importa{color:red;}ES6转ES5命令npmi-Dgulp-babelnpmi-Dbabel-corenpmi-Dbabel-preset-env[完整代码](https://github.com/nimojs/gul...
