Gulp 总结

Gulp介绍

　　Gulp是一个前端开发的自动化构建工具。前端开发往往需要把LESS/SCSS文件进行编译成CSS文件，javascript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作。而Gulp就是通过简单地代码配置与第三方插件的调用来帮助前端自动化完成这些操作。但不仅限于此，你还可以用Gulp完成页面在线即时预览，jshint代码检查等各种前端任务。

使用步骤：

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

 

（1）新建一个项目文件夹getstart。在文件夹中创建package.json。

    可以手动建立package.json文件，也可以使用命令行：在（cd）进入项目文件夹后使用cnpm init

  

（2）

本地安装gulp及任务所需要的插件

cnpm install --save-dev gulp
cnpm install --save-dev gulp-less
cnpm install --save-dev gulp-watch
cnpm install --save-dev require-dir

 

（3）新建gulpfile.js文件

     组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

 

　　gulp只有五个方法： task ， run ， watch ， src ，和 dest ，在项目根目录新建一个js文件并命名为 gulpfile.js ，根据任务要求在gulpfile.js 中写入代码：

 

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')   //该任务针对的文件
        .pipe(jshint())    //该任务调用的模块
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

// 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

（4）运行gulp

如：在终端运行 $ gulp sass ，将会执行名称为sass的任务；

在终端运行 $ gulp scripts ，将会执行名称为scripts的任务；

 

 

接口说明

Gulp提供4个基础API进行调用， 只需要掌握这4个API的使用方法并配合Gulp插件便能搭建一套自动化的前端开发任务系统。

gulp.task() ：task定义一个gulp任务；

gulp.src() ：src方法是指定需要处理的源文件的路径

gulp.dest() ：dest方法是指定处理完后文件输出的路径；

gulp.watch() ：watch方法是用于监听文件变化，文件一修改就会执行指定的任务；

Gulp.src(globs[, options])

此接口会匹配工作目录下指定规则的文件并返回提供给下一个插件管道使用。其中globs就是匹配格式，options是一些额外参数。