前端项目搭建（二）gulp的安装和使用

gulp：用来自动化开发流程。比如写完css后，要压缩成.min.css文件；写完js后，要做混淆和压缩，图片压缩等。

前提：
前端项目搭建（一）windows上nvm、node、npm的安装与使用

安装gulp

1、创建本地包管理环境

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

npm init

2、安装gulp
gulp的安装非常简单，只需要使用npm命令安装即可，但是因为gulp需要作为命令行的方式运行，因此需要在全局安装

npm install gulp -g

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

npm install gulp --save-dev

以上的–save-dev是将安装的包添加到package.json下的devDependencies依赖中。以后通过npm install即可自动安装。devDependencies这个是用来记录开发环境下使用的包。

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

var gulp = require("gulp")
gulp.task("greet",function(){
	console.log("hello world");
});

• 通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js环境下使用
• gulp.task是用来创建一个任务。gulp.tesk的第一个参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的。
• 写完以上代码后，以后如果想要执行greet命令，那么只需要进入到项目所在的路径，然后终端使用gulp greet即可执行。

4、创建处理css文件的任务
gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下gulp-cssnano插件。gulp相关的插件的安装也是通过npm命令安装，安装方式跟其他包是一模一样的（gulp插件本身就是一个普通包）。

对css文件的处理，需要做的事情就是压缩，然后再将压缩后的文件放到指定目录下（不要和原来css文件重合了）！这里我们使用gulp-cssnano来处理这个工作：

npm install gulp-cssnano --save-dev

然后在gulpfile.js中写入一下代码：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")

//定义一个处理css文件改动的任务
gulp.task("css",function(){
	gulp.src("./css/*.css")
	.pipe(cssnano())
	.pipe(gulp.dest("./css/dist/"))
});

5、修改文件名
压缩完css文件后，需要给他添加一个.min.css的后缀，这样一眼就知道是经过压缩过的文件。这时候需要安装使用gulp-rename

npm install gulp-rename --save-dev

示例代码如下：

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function(){
	gulp.src("./css/*.css")
	.pipe(cssnano())
	.pipe(rename({"suffix":".min"}))
	.pipe(gulp.dest("./css/dist/"))
});

运行：

gulp css