一、Gulp安装1.首先确保你已经正确安装了nodejs环境。然后就可以全局安装gulp了：$npminstall-ggulp我们可以查看gulp的版本$gulp-v这样就完成了全局安装2.安装时如果想把gulp写到项目package.json文件的依赖中，你可以加上--save-dev:$npminstall--save-devgulp其中--save-dev和--save的区别这里也解释的很清楚。其实和composer安装依赖包require一个存在的require-dev2是一样的。开始使用gulp1。和其他构建工具一样，gulpjs也需要相应的配置文件gulpfile.js执行$touchgulpfile.js2。首先，一个简单的egulpfile.js内容：vargulp=require('gulp');gulp.task('default',function(){//将你的默认任务代码放在这里});3.运行gulp$gulp要运行gulp任务，只需切换到存储gulpfile即可。js文件的目录，然后在命令行执行gulp命令。可以在gulp后面加上要执行的任务名，比如gulptask1。如果不指定任务名称，这里会执行名为default的默认任务。将运行名为default的任务，但它不执行任何操作。如果要单独执行特定任务，请输入gulp3.gulpAPI使用gulp只有五个方法：taskrunwatchsrcdest1.gulp.src(globs[,options])globs参数是一个文件匹配Pattern（类似于正则表达式），其类型为String或Array，用于匹配文件路径（包括文件名），当然你也可以在这里直接指定具体的文件路径。当有多个匹配模式时，该参数可以是一个数组。options是一个可选参数。通常我们不需要使用它。这里我们可以简单的理解为这个方法就是读取你需要操作的文件。当有多个匹配规则时，可以传入一个数组，比如//使用数组来匹配多个文件。gulp.src(['js/*.js','css/*.css','*.html'])另外数组也可以进行排除匹配（ps：数组第一个元素不能进行排除mode)gulp.src([*.js,'!a*.js'])//匹配所有js文件，但排除以a开头的js文件gulp.src(['!a*.js',*.js])//不会Exclude任何文件，因为排除模式不能出现在数组的第一个元素中2.gulp.dest(path[,options])简单的说，gulp.dest()就是用来写入的路径file作为写入文件的路径options是一个可选的参数对象。通常我们不需要使用gulp。gulp的运行过程大致是这样的：gulp的使用过程一般是这样的：首先通过gulp.src()方法stream获取我们要处理的文件，然后将文件流导入到gulp插件中通过pipe方法，最后将插件处理后的stream通过pipe方法导入到gulp.dest()中，gulp.dest()方法将stream中的内容写入文件，首先要做的这里要明确的是，我们传入gulp.dest()的path参数只能用来指定生成文件的目录，不能指定生成文件的文件名。它生成的文件的文件名使用导入到它的文件流的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传递一个带有文件名的路径参数，然后它还会将此文件名视为目录名，例如：vargulp=require('gulp');gulp.src('script/jquery.js').pipe(gulp.dest('dist/foo.js')));//最终生成的文件路径是dist/foo.js/jquery.js而不是dist/foo.js通过在gulp.src()方法配置参数中指定base属性，我们可以更灵活的更改路径到gulp.dest()生成的文件。当我们在gulp.src()方法中没有配置base属性时，base的默认值为通配符开始出现之前的路径部分，例如：gulp.src('app/src/**/*.css')//此时base值为app/srcgulp.src()bade属性可以在options中指定gulp.src('client/js/**/*.js',{base:'客户端'}).pipe(minify()).pipe(gulp.dest('build'));//写入'build/js/somedir/somefile.js'gulp.src(script/lib/*.js,{base:'script'})//base参数配置完成。此时基础路径为script//假设匹配的文件为script/lib/jquery.js.pipe(gulp.dest('build'))//此时生成的文件路径为build/lib/jquery.js我们可以这样理解：我们上面提到的gulp.dest()生成文件路径的规则，其实可以理解为用我们传入的路径替换gulp.dest()中的基本路径。src()最后得到生成文件的路径。3.gulp.task(name[,deps],fn)name为任务名称（名称中请不要使用空格）deps为当前定义的任务需要依赖的其他任务的数组。当前定义的任务将在所有相关任务执行完毕后才会开始执行。如果没有依赖，可以省略这个参数fn作为任务函数，我们把任务要执行的代码都写在里面。此参数也是可选的。在gulp中执行多个任务，我们项目中肯定会有几个处理cssjs图片字体等静态文件的任务，可以通过任务依赖来实现。比如我要执行一、二、三三个任务，那么我们可以定义一个空任务，然后把这三个任务作为这个空任务的依赖：//只要默认任务是执行时，相当要执行css、images、scripts三个文件任务gulp.task('default',['css','images','scripts']);如果任务之间不依赖，那么任务会按照你的执行顺序来写，如果有依赖，那么有依赖的任务会先执行。对于依赖任务异步的应用场景有几种解决方案：依赖任务异步执行4.gulp.watch(glob[,opts],tasks)或者gulp.watch(glob[,opts,cb])gulp.watch()用于监视文件的变化。当文件发生变化时，我们可以用它来执行相应的任务，比如文件压缩等.opts是一个可选的配置对象，通常不需要。tasks是文件改变后要执行的任务。它是一个数组。每当监视的文件发生变化时，都会调用此函数并向其传递一个对象。,对象包含一些文件变化的信息，type属性是变化的类型，可以增加，改变，删除；path属性是变化文件的路径gulp.watch('js/**/*.js',function(event){console.log(event.type);//changetypeadded是添加，deleted是删除,changed被改变了console.log(event.path);//改变文件的路径});gulp.watch('js/**/*.js',function(event){console.log('File'+event.path+'was'+event.type);});4.gulp插件使用gulp插件库1.自动加载gulp-load-plugins安装：npminstall--save-devgulp-load-plugins在使用gulp插件时需要require进来，这个插件很好的解决了这个问题。gulp-load-plugins不会一开始就加载package.json中所有的gulp插件，而是当我们需要使用某个插件时，才会加载那个插件。因为gulp-load-plugins是通过你的package.json文件加载插件的，所以你必须确保你需要自动加载的插件已经写入到package.json文件中，并且这些插件已经安装好了。这是一段load-plugins的代码，使用其他插件很方便（其实就是匹配package.json的插件）：varplugins=require("gulp-load-plugins")({pattern:['gulp-*','gulp.*'],replaceString:/\bgulp[\-.]/});这样我们的插件就可以通过plugins.name()来使用了，举一个简单的使用gulp-rename插件gulp的例子。task('one',function(){gulp.src(paths.styles.src+'/one.css').pipe(plugins.rename('new.css'))//而不是声明类似varrename=require('gulp-rename').pipe(gulp.dest(paths.styles.dest));});2.重命名gulp-renameInstall:npminstall--save-devgulp-renamevarrename=require('gulp-rename');//最后生成src/styles/one.css到assets/styles/new.cssgulp。task('one',function(){gulp.src('src/styles/one.css').pipe(rename('new.css')).pipe(gulp.dest('asstes/styles'));});3.js文件压缩gulp-uglify安装：npminstall--save-devgulp-uglifyvargulp=require('gulp'),uglify=require("gulp-uglify");gulp.task('minify-js',function(){gulp.src('src/scripts/*.js')//待压缩的js文件.pipe(uglify())//使用uglify压缩.pipe(gulp.dest('assets/js'));//压缩路径});4.文件合并gulp-concat安装：npminstall--save-devgulp-concatvargulp=require('gulp'),concat=require("gulp-concat")uglify=require("gulp-uglify");//如果src/scripts下有one.jstwo.jsthree.js，那么最后合并到assets/js/all.jsgulp.task('concat',function(){gulp.src('src/scripts/*.js')//要合并的文件.pipe(uglify())//使用uglify压缩.pipe(concat('all.js'))//合并匹配的js文件并命名为“all.js”.pipe(gulp.dest('assets/js'));});5.编译安装less和sass：npminstall--save-devgulp-lessnpminstall--save-devgulp-sassvargulp=require('gulp'),less=require("gulp-less");gulp.task('compile-less',function(){gulp.src('src/less/*.less').pipe(less()).pipe(gulp.dest('assets/css'));});当然，还有其他非常有用的插件。
