概念要学习gulp，首先要了解什么是gulp。Gulp是前端开发过程中构建代码的工具，是构建自动化项目的利器；不仅可以优化网站资源，而且在开发过程中可以通过正确的工具自动完成很多重复性的工作；使用它，我们不仅可以愉快地编写代码，还可以大大提高我们的工作效率。它是一个基于Nodejs的自动任务运行器，可以自动完成测试、检查、合并、压缩、格式化、浏览器自动刷新、部署javascript/coffee/sass/less/html/image/css等文件的生成，修改监听文件后重复指定的步骤。在实现上，她借鉴了Unix操作系统的pipe思想。上一级的输出直接成为下一级的输入，操作起来非常简单。功能和与grunt的比较我试着翻译了这张幻灯片中的内容。首先，我们要把我们的项目想象成许多水管，文件在里面流动。而不是把它想象成一辆装满货物的面包车。同时，如果你想成为一名编程开发人员，了解流控是必要条件，了解新的流控技术可以让你更有效率。接下来，我们想象一个画面：从文件系统中读取一个文件，经过一系列修改后提交给文件系统。如果您脑海中浮现的画面是：那么您可能是一个grunt用户。其实理想的流程应该是这样的：也就是说，我们修改完不需要提交一次。多次修改后一次性提交到文件系统。在gulp之前，人们用的是grunt，它有很多强大的插件，但是熟悉它的朋友可能会遇到以下问题：插件会做太多的事件，比如我想要banner却用了js压缩插件-去做；插件做了很多不需要做的事情，比如我想在我的代码中添加一个单元测试，这也需要使用插件来实现；grunt的配置文件在尝试做所有事情时一团糟；流量控制导致大量的临时文件。Gulp的理念与grunt相反。它试图使我们的项目构建系统更加自由和更少约束。换句话说，构建系统应该只控制文件，其余的留给其他工具。下面是gulp和grunt的区别：使用gulp，你的构建文件只是代码，而不是一系列的配置；在使用gulp插件时，只需要了解插件本身所依赖的库的原始配置，而不是像grunt那样，往往将配置包裹一层再暴露给用户；插件通常不会超过20行代码，因为它们只专注于解决一个问题；并发执行任务；理想的文件输入和输出流。因此，gulp提供了文件流和基本的任务系统，学习gulp只需要了解5个方法：gulp.task(name,fn):定义一个名为name的任务，你也可以自定义它的前置任务任务;gulp.run(tasks...)：开始执行最大并发数的任务；gulp.watch(glob,fn)：监听文件变化，触发变化事件时执行相应的回调函数；gulp.src(glob)：这个方法会返回一个可读的文件流；gulp.dest(path[,options]):输出文件到目标地址，如果文件不存在，先创建文件。嗯，你已经是gulp专家了（滑稽脸）。在了解了gulp的基本概念和gulp可以解决的问题之后，我们来实践一下gulp。新建一个demo文件夹，执行npminit初始化项目，然后安装gulpnpminstallgulp-g最后新建一个gulpfile.js。在gulpfile.js中，输入如下代码：vargulp=require("gulp");//压缩js和css文件varuglify=require("gulp-uglify");varcleanCss=require('gulp-clean-css');//自定义脚本任务，处理js文件压缩//pipe()是node.js流中的一个方法//参数是一个函数，这个函数是为了接受前一个流（stream）的结果，并返回一个处理过的流的结果gulp.task('script',function(){gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'));});//自定义css任务，处理css文件压缩gulp.task('css',function(){gulp.src('css/*.css').pipe(cleanCss()).pipe(gulp.dest('dist/css'));});之后，我们需要新建两个文件夹：js和css，其中我们分别新建index.js和index.css。最后在命令行输入gulpcssgulpscriptgulp执行任务，自动新建一个dist文件夹，将压缩后的文件放到这个文件夹中。如果想修改代码后自动更新，使用gulp.watch方法：gulp.task('modify',function(){gulp.watch('js/*.js',['script']);gulp.watch('css/*.css',['css']);})在命令行输入gulpmodify修改css文件，命令行会显示[13:44:41]Starting'modify'...[13:44:41]14毫秒后完成“修改”[13:44:48]开始“css”...[13:44:48]15毫秒后完成“css”最终文件目录是如下：相关插件gulp貌似功能强大因为插件生态丰富，所以最后打算介绍一下主流插件：插件名称功能gulp-sass将sass编译成css文件gulp-imagemin压缩png/jpg/git/svg格式图片文件gulp-gzipgzip插件gulp-util集合Gulp中常用的许多小工具，如log()、colors等，gulp-spriter自动合并sprite图片。gulp-watch插件可以自定义触发事件，通过插件提供回调机制配合熟悉的控制台非常方便。观察构建流程。gulp-colors设置CLI输出文本的颜色gulp-rev将MD5指纹写入文件名gulp-sourcemaps生成SourceMapgulp-uglify压缩js文件gulp-clean-css压缩css文件gulp-concat合并JS或CSS文件参考commongulp插件gulp使用指南
