Gulp学习笔记

一、简介：

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

1、全局安装gulp

命令：$ npm install --global gulp

2、作为项目的开发依赖安装

命令：$ npm install --save-dev gulp

3、在项目的根目录下创建一个gulpfile.js的文件。

文件内容为：

var gulp = require('gulp');
gulp.tesk('default',function(){

});

4、运行gulp

$ gulp 

默认的default 任务（task）名将会被执行，该任务不做任何操作。

若想要单独执行指定的任务（task）请输入：

$ gulp <tesk> <othertask>

二、一些常用gulp方法的总结：

1、监听事件（自动编译less）

1.1、若每修改一次less，就要手动执行任务，显然是不合理的，所以当有less文件发生改变时使其自动编译.

    var gulp = require('gulp'),

    less = require('gulp-less');

 

gulp.task('testLess', function () {

    gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less'])

        .pipe(less())

        .pipe(gulp.dest('src/css'));          

});

 

gulp.task('testWatch', function () {

    gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务

});

执行的时候只需在工程所在目录下运行gulp testWatch 就会实时编译文件。

2、异常处理

2.1、当编译less时出现语法错误或者其他异常，会终止watch事件，通常需要查看命令提示符窗口才能知道，这并不是我们所希望的，所以我们需要处理出现异常并不终止watch事件（gulp-plumber），并提示我们出现了错误（gulp-notify）。

    notify = require('gulp-notify'),

    plumber = require('gulp-plumber');