gulp使用方法总结

gulp是用于前端构建的基于文件流的一套工具。可以用于压缩、编译、合并、检查文件等操作。可以节省大量的用于繁琐重复操作的人力。最开始就是安装gulp工具了，在命令行中切换到工作的文件目录下，安装gulp；可以选择局部安装（cnpm install gulp --save-dev），也可以选择全局安装（cnpm install gulp -g）。
使用gulp主要要用到3个API：
（1）gulp.src()：
　　主要用于获得匹配的目标文件。src的参数可以是一个匹配字符串（*是通配符），也可以是一个确定的文件路径，还可以是一个数组　        （包含多个筛选项或者多个目标路径）。匹配字符串前面加上感叹号“!”代表不匹配。这个函数会返回所有匹配的文件。后跟                       pipe（gulp的中心思想，继承于Unix的管道思想）可以对返回的文件进行下一步操作。总之，可以把这个函数看做是一个查找匹配文件       的 方法就行。
（2）gulp.dest()：
      如果说gulp.src()是文件输入操作，那么gulp.dest()就是文件输出操作。gulp.dest()用于将处理过后的文件输出到目标文件夹，值得一提       的是如果指定的文件夹不存在，gulp.dest()函数会自动创建路径。通常，gulp.dest()函数是gulp任务函数（下文提及）的最后一步。
（3）gulp.task()：
      gulp.task()函数是gulp用于定义gulp任务的API，其一般用法如下：
      

gulp.task('TaskName',function(){
         //Task details, do something...
     });

 

当然还有一些特殊用法，比如使用回调函数和前缀函数，这些用法用的没有那么多。
经常使用的API就是这三个，其他功能的实现主要取决于gulp插件了。

下面是几个常用功能在定义gulp任务时的实例：
（1）压缩js文件实例：
　　这里要用到的gulp插件名字叫gulp-uglify。
　　首先在npm中安装gulp插件：cnpm install gulp-uglify --save-dev或者cnpm install gulp-uglify -g；
　　然后手动创建一个gulpfile.js文件，在文件中写js代码：
　　

var gulp = require('gulp'),
　　uglify = require('gulp-uglify');
　　gulp.task('compressJS',function () {
　　　　gulp.src('JS_Prepage.js')
　　　　.pipe(uglify())
　　　　.pipe(gulp.dest('dist/js'));
　　});

 

 

　　然后在node命令行或者webstorm中调用任务就可以了。
（2）压缩CSS文件的实例：
　　要用到的gulp插件名字为gulp-minify-css；
　　首先要在npm中手动安装这个gulp插件，cnpm install gulp-minify-css -g或者cnpm install gulp-minify-css --save-dev
　　然后就可以用gulp.task()定义任务了：
　　

var gulp = require('gulp');
　　var minify = require('gulp-minify-css');
　　gulp.task('compressCSS',function(){
　　　　gulp.src(['*.css','!*.min.css'])
　　　　.pipe(minify())
　　　　.pipe(gulp.dest('dist/css'));
　　});

 

 

　　然后在node命令行或者webstorm中调用任务就可以了。
（3）压缩图像实例：
　　要用到的插件名字为gulp-imagemin（实际上，因为模块化的思想，前端一个gulp模块基本只能实现一个特定的功能，

　　所以针对不同的图像格式，可能需要引用不同的gulp插件）。  
　　首先在npm中手动安装这个gulp插件，cnpm install gulp-imagemin -g或者cnpm install gulp-imagemin --save-dev
　　然后就可以用gulp.task()定义任务了：
　　

var gulp = require('gulp'),
　　imagemin = require('gulp-imagemin');

　　gulp.task('image-compress',function () {
　　　　gulp.src('head.png')
　　　　.pipe(imagemin())
　　　　.pipe(gulp.dest('dist/pics'));
　　});

 

（4）其他实例大同小异，一般只是引用的包不同。
　　总结gulp.task()定义任务的方法：
　　

var gulp = require('gulp');    //要用到gulp.task等gulp操作就必须引用gulp模块。
　　var name = require('gulp-pluginname');//这里的name可以自定义，用于表示引用到的模块包，后面require里面的参数是你之前在npm安    //装的插件的名称，必须符合要求。一般gulp插件格式为gulp-xxx。
　　gulp.task('TaskName',function(){    //TaskName可以自定义，在调用时要用到。
　　gulp.src('xxxxx') //指定要操作的文件路径
　　　　 .pipe(name()) //与之前第二行引用包时定义的变量相呼应，这里必须相同。
　　　　　　　　　　　　　//可以看出来用一个变量接受引用到的模块，这个变量就是一个方法。
　　　　 .pipe(gulp.dest('DirectoryName'));//定义目标文件路径，指定将操作后的文件存放到何处。通常处理后的文件放在dist目录下
});

 

介绍完gulp的基本API之后，就是API的基本使用流程了，

Gulp使用方法：
gulp通过gulp.task()方法，将任务定义在一个名为gulpfile.js的文件中（文件名称固定）。定义好之后就可以在node命令号中通过gulp TaskName执行任务了。TaskName就是在gulpfile.js中定义的任务名称。另外还可以通过WebStorm这个IDE执行gulp任务。具体步骤如下图：

(1)WebStorm执行gulp任务：

 

（2）node命令行执行gulp任务：