gulp 入门

公司项目中用的代码构建工具是gulp,现在对用到的gulp插件的用法做一下总结。

gulp是基于node.js的自动任务运行器，我们用它来完成javascript、css、sass/less、html/css、image等文件的合并和压缩，以及浏览器自动刷新、监听文件等等。

首先要安装node.js环境，然后全局安装gulp（使用的是淘宝镜像的cnpm）): 

cnpm install gulp -g

然后在项目文件夹下新建一个名为gulpfile.js的文件，这个文件就是gulp的主文件，在这个文件中编写gulp任务。

var gulp = require('gulp');

这行代码告诉node去node_modules中查找gulp包，先局部查找，找不到再去全局环境中找，然后将其赋给变量gulp，就可以使用了。

在项目文件夹下打开node命令行窗口，安装gulp包，--save-dev是为了将安装的gulp的版本信息写入package.json文件中，这个文件中保存了和项目相关的各种依赖关系，在这里就是项目所安装的插件:

cnpm install gulp --save-dev

OK，现在我们就可以使用gulp了。gulp的使用方法非常简单：

gulp.task('taskName',function(){　　
　　return gulp.src('文件地址')
　　　　　　.pipe(导入到gulp插件中)
　　　　　　.pipe(someplugin())
　　　　　　.pipe(gulp.dest('要输出文件的地址'));
});

任务名称是自己起的，然后在node命令行窗口中执行命令即可：

gulp taskName

我们的项目中用到了如下插件：

var less = require('gulp-less'),//css预处理
    concat = require('gulp-concat'),//合并插件
    uglify = require('gulp-uglify'),//压缩js的插件
    minifyCss = require('gulp-minify-css'),//压缩CSS插件
    rename = require('gulp-rename'),//重命名插件
    plumber = require('gulp-plumber'),//错误监听处理
    autoprefixer = require('gulp-autoprefixer');

将它们依次安装并保存在package.json文件中后，就可以使用了。

gulp API主要有四个：gulp.src,gulp.dest,gulp.task,gulp.watch;只要合理使用这四个API就可以方便迅速的配置文件，gulp真的是很方便.

//将less文件编译成css并压缩

gulp.task('less',function(){
   return gulp.src('app/src/less/*.less')
       .pipe(autoprefixer({
          browsers:['last 2 versions','Android >= 4.0'],
          cascade:true,//是否美化属性值 默认：true 像这样：
          //-webkit-transform:rotate(45deg);
          //        transform:rotate(45deg);
          remove:true //是否去掉不必要的前缀 默认:true
       }))
       .pipe(less())
       .pipe(gulp.dest('app/src/css'))
       .pipe(minifyCss())
       .pipe(rename({suffix:'.min'}))
       .pipe(gulp.dest('app/bulid/css'));
});

//合并压缩js文件

gulp.task('concatjs',function(){
   return gulp.src('app/src/js/cat/*.js')
       .pipe(plumber())//防止出错停止
       .pipe(concat('index.js'))
       .pipe(uglify())
       .pipe(rename({suffix:'.min'}))
       .pipe(gulp.dest('app/bulid/js/'))
});

//移动文件

gulp.task('remove',function(){
   return gulp.src('app/src/*/**.html')
       .pipe(gulp.dest('app/bulid'));
});

　　

//监听事件

gulp.task('watch',['remove','concatjs','less'],function(){
   gulp.watch('app/src/less/*.less',['less']);
    gulp.watch('app/src/js/**/*.js',['js']);
　　......//其它任务
});