首页 > 代码库 > gulp使用方法总结

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,其一般用法如下:
      

1 gulp.task(‘TaskName‘,function(){
2          //Task details, do something...
3      });

 


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

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

1 var gulp = require(‘gulp‘),
2   uglify = require(‘gulp-uglify‘);
3   gulp.task(‘compressJS‘,function () {
4     gulp.src(‘JS_Prepage.js‘)
5     .pipe(uglify())
6     .pipe(gulp.dest(‘dist/js‘));
7   });

 

 


  然后在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()定义任务了:
  

1 var gulp = require(‘gulp‘);
2   var minify = require(‘gulp-minify-css‘);
3   gulp.task(‘compressCSS‘,function(){
4     gulp.src([‘*.css‘,‘!*.min.css‘])
5     .pipe(minify())
6     .pipe(gulp.dest(‘dist/css‘));
7   });

 

 


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

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

1 var gulp = require(‘gulp‘),
2   imagemin = require(‘gulp-imagemin‘);
3 
4   gulp.task(‘image-compress‘,function () {
5     gulp.src(‘head.png‘)
6     .pipe(imagemin())
7     .pipe(gulp.dest(‘dist/pics‘));
8   });

 

(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任务:

技术分享

 

gulp使用方法总结