gulp是什么？一个自动化构建工具，一个基于nodejs的自动任务运行器。为什么要使用它？易于使用，易于学习。自动完成javascript/coffee/sass/less/html/image/css等文件的测试、校验、合并、压缩、格式化、浏览器自动刷新、部署文件生成，监控文件变化后重复指定这些步骤。在实现上，她借鉴了Unix操作系统的pipe思想。上一级的输出直接成为下一级的输入，操作起来非常简单。grunt和webpack的区别在于gulp和grunt非常相似，但是相比grunt频繁的IO操作，gulp的流式操作可以更快更方便的完成构建工作。前两者定位为工具，而webpack则是模块化的解决方案。说到browserify/webpack，还得说说seajs/requirejs。这四个都是JS模块化的解决方案。其中seajs/require是一种类型，browserify/webpack是另一种类型。seajs/require：是一种在线“编译”模块的解决方案，相当于在页面加载了一个CMD/AMD解释器。通过这种方式，浏览器可以识别define、exports和modules。它还实现了模块化。browserify/webpack：是预编译模块方案，比上面的更智能。gulp也可以调用webpack。为什么要使用4.0？结合任务。比如之前的gulp很难控制多个异步任务，必须依赖第三方模块，比如run-sequence、event-stream等，效果并不理想。现在gulp带来了两个新的API：gulp.series[sequence]和gulp.parallel[parallel]，这两个革命性的API将帮助开发者解决烦人的任务流控制问题。//clear任务执行完成后，copygulp.task("build",gulp.series("clear","copy"));//inject:home和inject:list同时执行gulp。task("inject-all",gulp.parallel("inject:home","inject:list"));提示：任务中需要立即执行任务。之前的版本有gulprunXX，新的没有，但是可以这样写：gulp.parallel('XX')();gulp.series('XX')();支持异步任务有3种方式可以确认gulp可以识别任务何时完成。后两者主要是return回调返回一个stream和返回一个Promise。更多信息可以参考这篇文章：http://codecloud.net/10666.htmlnpm包管理包管理主要在根目录下的package.json文件中。脚本中有一些npm任务，可以通过npmrundev来执行。dependencies是项目中必须的包，我们目前不用，只有vue.devDependencies是用于开发的包。那些发布到生产环境不需要的都放在这里。通常安装时需要使用npminstall-save-devXX，可以简写为npmi-DXX。像这样同时安装多个包：npminstall-save-devaabb。或者将包复制到包文件中，直接在根目录命令行运行npmi或npminstall。包版本：如"vue":"^2.0.1"一个完整的版本号组表示为：[主版本号，次版本号，补丁版本号]~会匹配最新的subversion（中间的数字）,如~1.2.3会匹配所有1.2.x版本,但不会匹配1.3.0及以上版本^会匹配最新的大版本(第一个数字),如^1.2.3会匹配所有1.x.x版本,2.0.0慢慢过去了。全局安装方法：npmigulp-g项目里面：npmi-Dgulp项目根目录创建gulpfile.js，这是一个配置文件。任务类似于gulp.task('a',function(){});在webstorm中右键gulpfile.js，选择ShowGulpTasks打开Gulp窗口，双击任务a。或者在命令行输入gulp几个APIgulp.src(globs[,options])来输出与提供的匹配模式或匹配模式数组相匹配的文件。将返回一个可以通过管道传输到其他插件的流。gulp.src('client/templates/*.jade').pipe(jade()).pipe(minify()).pipe(gulp.dest('build/minified_templates'));globs可以是字符串也可以是数组，相对路径或者绝对路径都可以。例如：["src/**/*.html","!src/*.html","src/play.html"]表示目标是src下的所有html文件，但不包括根目录下的html目录文件，但它必须在根目录中包含play.html。options：通过glob-stream传递给node-glob的参数，可以传也可以不传。options.buffer类型：布尔值默认值：true如果此选项设置为false，则file.contents将作为流而不是文件缓冲区返回。这在处理一些大文件时会很有用。options.read类型：Boolean默认值：true如果此项设置为false，那么file.contents将返回一个空值（null），即文件不会被读取。只获取文件路径，在不需要读取内容时有用。options.base举个例子感受一下。例如，在路径为client/js/somedir的目录中，有一个名为somefile.js的文件：gulp.src('client/js/**/*.js')//match'client/js/somedir/somefile.js'并将`base`解析为`client/js/`.pipe(minify()).pipe(gulp.dest('build'));//写入'build'/somedir/somefile.js'gulp.src('client/js/**/*.js',{base:'client'}).pipe(minify()).pipe(gulp.dest('构建'));//写入'build/js/somedir/somefile.js'gulp.dest(path[,options])可以通过管道输入，并将写入文件。并重新发出所有数据，因此您可以将其通过管道传输到多个文件夹。如果文件夹不存在，将自动创建。path类型：String或Function将写入文件的路径（输出目录）。也可以传入一个函数，返回函数中对应的路径。options类型：Objectoptions.cwd类型：String默认值：process.cwd()输出目录的cwd参数仅在给定输出目录为相对路径时有效。options.mode类型：String默认值：0777八进制权限字符，用于定义在输出目录中创建的所有目录的权限。旧版本的gulp.watch(glob[,opts])有一个参数回调，例如：gulp.watch('js/**/*.js',function(event){console.log('File'+event.path+'是'+event.type+'，正在运行任务...');});将变为：varwatcher=gulp.watch('js/**/*.js'/*你也可以在这里传递一些选项和/或任务函数*/);watcher.on('all',function(event,path,stats){console.log('File'+path+'was'+event+',runningtasks...');});或监控个别事件类型，基本三种类型：添加、删除、更改');});watcher.on('add',function(path){console.log('文件'+路径+'已添加，正在运行任务...');});watcher.on('unlink',function(path){console.log('文件'+路径+'已删除，正在运行任务...');});基础插件参考文件夹：require-dircompressedjs:gulp-uglify有详细配置uglify({compress:{drop_console:true,//删除控制台，默认falsedrop_debugger:false//忽略调试器，默认true}}mergejs:gulp-concat压缩图片：gulp-imagemin压缩html：gulp-htmlmin压缩css：gulp-clean-css压缩成zip包：gulp-zipstar插件简化编写gulp插件：gulp-load-pluginsvar$=require('gulp-load-plugins')();gulp.src('from').pipe($.if(condition,$.uglify())//去掉前面的'gulp-'.pipe($.cleanCss())//原名gulp-clean-css，使用.pipe(gulp.dest('dist'));rename:gulp-renamegulp.src('from')。pipe(uglify()).pipe(rename('XX')).pipe(gulp.dest('dist'));条件：gulp-if返回true，调用下面的方法，其他的不申请也不愿意压缩或其他，但需要将文件复制到指定目录gulp.src('from').pipe(if(function(file){if(file.path.endsWith('.min.js')){returnfalse;}returntrue;},uglify())).pipe(gulp.dest('dist'));缓存：gulp-cache非常有用，它会缓存方法执行的结果，当file改完后会重新执行该方法，其他文件还是直接从缓存中读取结果，整个项目压缩js需要2多分钟，使用缓存后只需要1秒。js、css、图片，用起来都很费时间。注意：方法配置修改后缓存没用了，需要手动删除缓存文件夹gulp.src('from').pipe($.cache($.uglify(),{fileCache:newCache({"cacheDirName":"test",//缓存文件夹名称，默认为gulp-cache"tmpDir":"D:\\Documents\\gulp-cache"//指定本地缓存目录，默认为C:\Users\Administrator\AppData\Local\Temp，建议换个目录，因为一般会被当垃圾清除}),name:'js'//缓存文件夹名称是下一级子目录，这个示例类似：D:\\Documents\\gulp-cache\\test\\js})).pipe(gulp.dest('dist'));系统提示：gulp-notifygulp.src('from').pipe($.zip('map.zip')).pipe(gulp.dest('dist')).pipe($.notify({message:'地图压缩完成'}));文件注入：gulp-injectgulp.src('from',{cwd:"./src/entry/"}).pipe($.inject(gulp.src(['XX'],{read:false,cwd:'XXdir'}),{relative:true,starttag:"",endtag:"",转换：函数（文件路径，索引）{返回'';}}))回调地狱终结者：qq是一个Promise库，提供额外的接口将普通函数封装为Promise。详情参见：http://blog.csdn.net/ii1245712564/article/details/51419533
