前端自动化构建工具gulp

快速入门

全局安装gulp

npm install gulp --global

作为项目的开发依赖安装

npm install --save-dev gulp

在项目根目录创建gulpfile.js文件

运行gulp

gulp

默认的名为default的任务（task）将会被执行。

想要单独执行特定的任务（task），请输入gulp

gulp特点

易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

安装gulp

创建本地包管理环境

使用npm init命令在本地生成一个package.json文件，package.json是用来记录当你当前这个项目依赖了哪些包，以后别人拿到你这个项目后，不需要你的node_modules文件夹。只需要执行npm install 命令，即会自动安装package.json下devDependencies中指定的包。

只要使用npm命令安装即可。

因为gulp需要作为命令行的方式运行，因此需要安装在系统级别的目录中

npm install gulp -g

因为本地需要使用require的方式gulp。因此也需要在本地安装一份。

npm install gulp --save-dev

以上的--save-dev是将安装的包添加到package.json下的devDependencies依赖中。以后通过npm install 即可自动安装。

devDependencies是用来记录开发环境下使用的包，如果想要记录生产环境下使用的包，那么在安装的时候使用 npm install xxx --save 就会记录到package.json下的dependencies中，dependencies是专门用来记录生产环境下的依赖的包。

创建gulp任务

要使用gulp来流程化我们的开发工作，首先需要在项目根目录下创建一个gulpfile.js文件，然后再gulpfile.js中填入以下代码：

通过require语句引用已经安装的第三方依赖包。require只能引用当前项目的，不能引用全局的。

gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字，第二个参数是函数，就是执行这个命令的时候要做的事情。

进入项目所在路径，使用gulp greet执行。

创建处理css文件的任务

gulp只是一个框架。如果实现一个复杂功能，例如css压缩，则需要安装gulp-cssnano插件。使用npm命令安装。

npm install gulp-cssnano --save-dev

然后再gulpfile.js中写入以下代码：

gulp.task创建一个css处理任务

gulp.src找到当前css目录下所有以.css结尾的css文件

pip管道方法。将上一个方法的返回结果传递给另外一个处理器。比如cssnano

gulp.dest将处理完后的文件，放到指定的文件夹下。与源文件不同的目录。

修改文件名

压缩完css文件后，添加一个.min.css的后缀，即表示是压缩后的文件。

需要使用gulp-rename来修改。本地需要如下安装：

npm install gulp-rename --save-dev

上面使用rename方法，并且传递一个对象参数，指定修改后的名字。

gulp添加文件前缀

安装gulp-autoprefixer，用于添加css文件的前缀

自此package.json文件如下

帮助

url链接：

https://www.npmjs.com/package/packagename

例如：

https://www.npmjs.com/package/gulp-autoprefixer

gulp插件

https://gulpjs.com/plugins/

谢谢！