gulp入门

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

个人在学习后理解：gulp是一个能帮助开发者完成html、css、js压缩、丑化等项目上线前的工作的工具。

那么，该怎么使用gulp呢？

1、全局安装gulp（本文默认安装了nodejs）

$ npm install --global gulp

2、要在项目中使用gulp，还需要在项目中本地安装一遍gulp

$ npm install --save-dev gulp

3、这时候要在根目录创建一个gulpfile.js文件，个人认为就是gulp的配置文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4、写你自己的gulp任务

var gulp = require('gulp');// 其实gulp自身就像一个大老板，其本身不做多余的事，他只安排别人干活
var less = require('gulp-less');// 由上所述，所以，这里引用前，需要 $ npm install gulp-less
var imagemin = require('gulp-imagemin');// 同理，需要干什么就得安装什么插件

// 将less处理为css，需要安装gulp-less插件，$ npm install gulp-less
gulp.task('less', function () {// 在命令行使用gulp less就可以执行这段代码，同理将less改成其它名字也可以用 gulp + 名称执行
    // 借助gulp.src指定less文件位置
    gulp.src('./public/less/*.less')// 只要是less文件都执行,告诉文件位置
        // 借助于gulp插件实现less转css的操作
        .pipe(less())
        // 借助gulp.dest进行存储
        .pipe(gulp.dest('./release/public'));// 没有的文件会自动生成

});

// 处理图片(压缩图片),需要安装gulp-imagemin插件，$ npm install gulp-less
gulp.task('image', function () {
    gulp.src('./public/images/**/*')//  **代表无限向里面目录查找，*代表匹配所有文件
        .pipe(imagemin())// pipe是任务传递函数
        .pipe(gulp.dest('/release/public/images'));
});

此处，

gulp.task('任务名', [], function() {需要执行的代码})

第一个参数代表任务名，在命令行中使用 gulp + 任务名就可以执行

第二个参数代表依赖，代表当前任务运行前需要先执行什么任务，以上面的例子为例

var gulp = require('gulp');
var less = require('gulp-less');
var imagemin = require('gulp-imagemin');

gulp.task('less', function () {
    gulp.src('./public/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./release/public'));
});

gulp.task('image', ['less'],function () {
    gulp.src('./public/images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('/release/public/images'));
});

这样执行image任务时，就会先去执行less，不过要注意的是，这样代码是为异步的，也就是image任务里的代码不会等到less的代码执行完才执行。

所以，我们要将它转成同步的代码，例

var gulp = require('gulp');
var less = require('gulp-less');
var imagemin = require('gulp-imagemin');

gulp.task('less', function () {
    return gulp.src('./public/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./release/public'));

});

gulp.task('image', function () {
    gulp.src('./public/images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('/release/public/images'));
});

像这样加一个小小的return就可以了。

第三个参数代表这个任务需要干的事。

5、运行：

$ gulp + 任务名
// 如果只写gulp就会执行default里的代码

以上就是使用gulp的一个大概流程，下面以一段代码再说一下一些小细节

var gulp = require('gulp');
var less = require('gulp-less');
var imagemin = require('gulp-imagemin');

gulp.task('less', function () {
    gulp.src('./public/less/*.less')// src方法代表需要操作的文件的所在位置，它可以是一个数组['./public/less/*.less','./1.less']
        // src方法还有第二个参数，它是一个对象，{base: './'}，例如这样就会按照原路径./后的文件结构存储在release下
        .pipe(less())// less为插件方法，pipe为管道方法，用来传输任务
        // 借助gulp.dest进行存储
        .pipe(gulp.dest('./release'));// 如果不存在release会自动生成，如果你设置的路径中没有对应的文件或文件夹，也会自动创建
});

gulp.task('default', function () {
    // 将你的默认的任务代码放在这
});

这就是gulp的主要内容，剩下的就是按照需要去下载对应插件，并根据插件方法来运作了，下面是一些常用插件

gulp-imagemin 图片压缩
gulp-cssmin css压缩
gulp-htmlmin 压缩HTML
gulp-uglif js丑化
gulp-rev 添加版本号，类似md5，当内容改变后才能使版本号改变
gulp-rev-collector 记录源文件和添加了版本号的文件的对应关系
gulp-useref 可以在html文件中使用 <!-- bulid --> 和 <! -- endbulid --> 按需修改代码的插件
gulp-if 用于在gulp代码中判断的插件

再多说一句，在安装gulp插件前，最好先npm init 创建package.json文件，然后在安装插件时加上

--save-dev // 例：npm install gulp-useref --save-dev

这样的话，就会记录我们项目所用的依赖，别人在使用我们项目时，只需在项目中npm install 就可以安装全部依赖插件

还有，我们可以在根目录下创建一个.gitignore文件，里面写上我们不想提交的文件名，就可以在git提交的时候忽略它，因为node_modules不需要提交，别人下载了我们的项目后只需要npm install 就可以了。

猜你喜欢