gulp的使用

在此之前被提问到如果要压缩css文件，你会有什么办法？用过sass工具的任可能会想到它，在命令提示行中输入命令：sass --watch scss:css --style compressed，这时我们还可以用到gulp，一个自动化构建工具，下面进行配置它的运行环境。

1、全局安装gulp核心，在cmd中输入命令：cnpm install --global gulp (或者简写：cnpm install --g gulp)，其中也可以用npm下载。

gulp中文网地址：点击打开链接

2、检查是否成功安装gulp，输入命令：gulp -v (-v表示version，表示版本号)。

3、在项目中安装gulp，在项目路径下打开cmd，输入命令：cnpm i gulp --save-dev，其中--save-dev不是必须的，它的作用是将安装的依赖记录在package.json，方便下次使用。这时项目目录下会生成一个node_moudel文件和package.json文件。

4、在项目根目录下新建一个gulpfile.js文件，文件名字不能修改，gulpfile.js文件是gulp的执行文件。

5、gulpfile.js中写入内容，最简单的内容如下：

//声明一个gulp变量，用来表示下载好gulp核心。
new gulp=require("gulp");
//定义一个默认事件
gulp.task("default",function(){
  console.log("default");
})

6、在项目目录路径下的cmd中输入命令查看结果，gulp default。

7、回到主题，如何压缩一个css文件。

在gulpfile.js文件中引入css文件压缩用到的依赖库，gulp-minify-css。

例如：var gulp_minify_css=require("gulp-minify-css");同时注意在require这个文件之前，需要在cmd下载这个依赖库，下载命令：cnpm i gulp-minify-css --save-dev，当下载成功时，在package.json文件中可以看到记录。

8、然后开始开始使用这个依赖库

gulp.task("minifycss",function(){
   gulp.src("src/css/index.css")
       .pipe(gulp_minify_css())
       .dest("dist/css");
})

gulp.src文件源位置，pipe(gulp_minify_css())管道依赖库，.dest("dist/css")文件生成位置

最后在cmd中输入gulp minifycss，回车就可以看到结果。