gulp 基本使用

1， gulp 依赖node, 使用gulp 之前，要先安装node.  Node 安装完成后，它自带npm.

Npm： node package manager 就是node 包管理器. 用过java 的就知道，java 有许多包，我们使用一个包的时候，要先引入 import 这个包。Node 也是一样，当我们使用一个包时，就需要先安装它, npm install  包名。

2,  Node 安装完成， 按window +r 组合键，调用运行窗口，输入cmd, 打开windows 自带的命令窗口。输入npm install  –g  gulp, 就可全局安装gulp(g就是global 全局的意思)。

　　　　所谓全局安装，就是指我们可以在命令行中使用glup 命令。Gulp 安装完成后，你直接在命令行中输入gulp  -v , 它就输出了 gulp 的版本号。这也证明，我们可以在命令行中，直接使用gulp 命令。 这和java 的配置环境变量一样，如果要想在命令行中使用java 命令，就必须手动配置环境变量，npm install –g 安装之后，我们就省略掉这一步，直接使用。

3， 这时，我们就可以开始我们的项目了。比如，进入到e: 盘，新建一个空文件夹，命名为gulp。打开该文件夹，首先要做的是创建 一个package.json文件。这个文件主要是对整个 项目进行描述，项目名字，版本号，最主要是 对开发这个项目的依赖进行管理。怎样才能快速建立这个文件？ 进入到该文件夹下，按住shift键，右击鼠标， 单击“在此处打开命令窗口”，打开命令窗口，输入 npm init , 按要求进行添写，注意，命名（name） 不能用大写。

4， gulp 工作主要是通过插件完成，这里我们就用一下gulp-less 插件。准备工作：在gulp 文件夹下，新建index.html， less文件夹， less 文件夹下再建style.less文件。

在该文件夹下，打开命令行：npm install gulp gulp-less –save-dev, 本地安装gulp 和gulp-less 插件。所谓本地安装，其实就是只能在该项目文件夹下使用， 安装完成后，在文件中，你能看到多了一个node_modules 文件夹，它里面就包括我们安装的gulp 和gulp-less。 --save-dev, 保存到开发依赖中，dev 就是development, 指的就是开发环境。这时，打开package.json文件，你们会看到多了，devDependencies 字段，下面是gulp和gulp-less 及版本号。

5， 还差一步，那就是gulp的配置文件，gulpfile.js 文件。我们什么工具都有了，那要告诉gulp干什么事情， 这就是gulpfile.js文件做的事情，定义任务。在gulp文件夹下（项目根目下），新建gulpfile.js文件。先写一个简单的任务，把less转化成css。

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function(){
     gulp.src("less/style.less")
    .pipe(less())
    .pipe(gulp.dest("build")) 

})

6，在gulp根目录文件夹下，打开命令行，输入gulp less， 结束后，你可以看到，文件夹下多了一个build文件夹，并且里面有style.css 文件，打开index.html, 引入style.css, 可以看到样式起作用了。这证明，gulp任务完成。

首先，我们看到声明了两个变量。上面说到，本地安装的时候，只能在该项目下面使用，就是说的下面这两句。 因为，node 遵循的是CommonJS 规范， 通过require加载模块文件，进行使用。

var gulp = require(“glup”);

var less = require(“gulp-less”)

后面就是gulp 的api， gulp.task, gulp.src, gulp.dest, 和 pipe。 pipe是管道的意思，这也是gulp所说的它是其于流的构建工具。前一个的输出，变成后一个输入。

　　gulp.task(): 为gulp 定义一个任务，首先必须有任务名，这样我们才能告诉gulp 执行哪个任务，比如，在命令行中，输入glup less 就是执行我们定义的less命令。其次这个任务做什么事情，其实还有最一个可选，就是我们这个任务要不要等其他任务完成才执行，如果是，那就需要把这个依赖写到任务中，所以它接受两个必须参数，和一个可选参数。

gulp.task(name, dependes, func):

　　name: 就是任务名，它是一个字符串，注意命名中不能有空格，要不然，命令行中无法执行。dependes（可选）： 定义完成这个任务之前，必须先执行完成哪些任务，因此，它是一个数组列表，依次列出要先完成的任务如：[“a”, “b”]。func: 函数： 定义这个任务要做的事性。

如果，我们想把css 再压缩，那就需要先把less 转化css,  再进行压缩， less转为化css 就必须先执行，这就是依赖dependes.  要压缩css， 需要引入gulp-minify-css 插件，同时 引入gulp-rename 插件可以对压缩后的文件进行重命名， 写一个压缩任务minifycss, 对三个参数进行说明。

gulp.task("minifycss", ["less"], function(){
    gulp.src("build/style.css")
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest("build"))
})

　　这时，命令行中执行gulp minifycss 命令并没有使我们的网页发生变化，原来这个命令只是执行了less 任务， less转为化css 。一个命令只能执行一个任务，但它保证了任务的按顺序执行， 再执行gulp minifycss 命令, 网页发生了变化。 但是后来发现，这是我的一个错误认识。上文说到，gulp 是基于流的操作。gulp 执行minifycss 任务时依赖less, 因此 less 执行完后，必须要返回一个流，这个流再流入minifycss，这样就可以连续执行了。但我们的less任务没有返回值，所以执行完less任务后就中断了。less任务修改一下，加return, 这样执行一个gulp minifycss 命令就可以了。

gulp.task("less", function(){
     return gulp.src("less/style.less")
    .pipe(less())
    .pipe(gulp.dest("build")) 

})

为了减少在命令行中的输入，可以定义默认任务，定义之后，直接在命令行中输入gulp,就可以执行任务。定义方式：gulp.task("default", ["minifycss"]). gulpfile.js文件如下，命令行中输入gulp 可以才测试。

var gulp = require("gulp");
var less = require("gulp-less");
var minifycss = require("gulp-minify-css");
var rename = require('gulp-rename');
// less --> css
gulp.task("less", function(){
    return gulp.src("less/style.scss")
    .pipe(less())
    .pipe(gulp.dest("build"))
})

// 压缩css
gulp.task("minifycss", ["less"], function(){
    gulp.src("build/style.css")
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest("build"))
})

// 定义默认任务
gulp.task("default", ["minifycss"]);

gulp.src()：指定任务要处理的文件，因此，它接受一个必须的参数：文件的路径， 它还有一个可选的options, 对它进行配置，这时没有具体研究。gulp.src(“文件路径”[, options])

　　文件路径可以是具体的路径，可以是通配符路径：具体如下：

　　　　“src/a.js”：指定具体文件；

　　　　“*”：匹配所有文件    例：src/*.js(包含src下的所有js文件)；

　　　　“**”：匹配0个或多个子文件夹    例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

　　　　“{}”：匹配多个属性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

　　　　“!”：排除文件    例：!src/a.js(不包含src下的a.js文件)；

gulp.dest()： 指定任务完成后生成的文件放到什么地方，因此它接受一个必须的参数：文件的路径， 和 gulp.src 一样，它还有一个可选的options, 对它进行配置，gulp.dest(“文件路径”[, options])。

gulp 还有一个api，我们没有用到，这就是gulp.watch(), 它对文件变动进行监听,如果文件变动之后，它要做哪些事情。因此，它接受两个必须的参数，要监听的文件，执行的任务列表。 如gulp.watch('less/*.less', ['less','minifycss']);  如果.less文件发生变化，gulp 自动执行less 和minifycss 任务。 定义一个watch任务并执行，修改一下.less 文件，可以看到style.css 和min.css 文件同时变化了，刷新浏览器，也变化了。

gulp.task("watch", function(){
    gulp.watch("less/*.less", ["less", "minifycss"])
})

gulp.watch还能返回一个对象发射change 事件，它接受一个回调函数，change 完成后，执行的事情， 修改上面的代码如下， 执行gulp命令可以看到控制台输出1

gulp.task("watch", function(){
    var watch = gulp.watch("less/*.less", ["less", "minifycss"]);
    watch.on('change', function(){
        console.log(1);
    })
})

gulp 最基本的就这些了，整个配置文件如下：

var gulp = require("gulp");
var less = require("gulp-less");
var minifycss = require("gulp-minify-css");
var rename = require('gulp-rename');
// less --> css
gulp.task("less", function(){
    return gulp.src("less/style.less")
    .pipe(less())
    .pipe(gulp.dest("build"))
})

// 压缩css
gulp.task("minifycss", ["less"], function(){
    gulp.src("build/style.css")
    .pipe(minifycss())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest("build"))
})

// 监听任务
gulp.task("watch", function(){
    var watch = gulp.watch("less/*.less", ["less", "minifycss"]);
    watch.on('change', function(){
        console.log(1);
    })
})
gulp.task("default", ["watch"]);