gulp 使用指南

Posted 2021-04-08 rails365

1. 介绍

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于Node.js 构建的，利用Node.js 流的威力，你可以快速构建项目

利用gulp可以轻易地实现，比如css压缩，把coffee转化成js，压缩图片等任务。

2. 安装

按照官方的指令，使用如下命令即可安装。

npm install gulp-cli -g
npm install gulp -D

3. 使用

在使用之前可以先用npm init初始化一个项目。

所有的task只要放在一个文件中，这个文件叫gulpfile.js。

比如放个最简单的：

var gulp = require('gulp');// default是默认的方法，运行gulp命令时会找到这个方法。gulp.task('default', function() {  // place code for your default task here
  console.log('gulp')
});

然后键入gulp命令。

输出如下:

[14:43:31] Using gulpfile ~/codes/koa-app/gulpfile.js
[14:43:31] Starting 'default'...
gulp
[14:43:31] Finished 'default' after 134 μs

4. 一个实例

现在来加一个实例，使用gulp + babel来转化一下es6的语法为es5。

我们要使用gulp的插件，gulp有好多插件，这个实例我们使用的是gulp-babel。

首先安装一下这个插件。

npm install --save-dev gulp-babel babel-preset-es2015

把gulpfile的内容用如下的内容代替。

const gulp = require('gulp');const babel = require('gulp-babel');// gulp.src会指定源文件，然后通过pipe函数把内容传给下个处理方法，最后gulp.dest是输出处理后的文件内容。gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

新建src/app.js文件，内容如下:

(i) => i + 1 //ES5

使用了es6的语法，我们运行一下gulp命令，看能不能转化成功。

输出如下:

// dist/app.js"use strict";

(function (i) {  return i + 1;
}); //ES6

是成功的！

https://github.com/gulpjs/gulp/blob/master/docs/API.md 这里列出了所有的gulp的api方法，比如gulp.src可以接些什么样的参数，gulp.dest能怎么用之类的，都可以通过这里查到。

5. watch

每次一改源码文件(src/app.js)内容，就要重新运行gulp命令，这样会好烦的。

如果每次一改源码文件(src/app.js)内容，就可以自动运行gulp命令就好了。

有的，gulp，提供了一个命令，叫gulp.watch。

我们把gulpfile内容改造如下:

const gulp = require('gulp');const babel = require('gulp-babel');// 定义了普通方法es6gulp.task('es6', () => {  return gulp.src('src/app.js')
        .pipe(babel({
          presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('default', () => {
  gulp.watch('src/app.js', ['es6']);
});// The default task (called when you run `gulp` from cli)// gulp.task('default', ['es6'])

你再重新运行gulp命令和修改源码文件内容试试。

其实也可以用gulp-changed这个插件来代替watch的功能。

6. gulp的插件

官方推荐了这几个插件，可以研究一下:

• gulp-changed - only pass through changed files

• gulp-cached - in-memory file cache, not for operation on sets of files

• gulp-remember - pairs nicely with gulp-cached

• gulp-newer - pass through newer source files only, supports many:1 source:dest

除此之外，http://gulpjs.com/plugins/ 这个网站可以找到所有的插件。

下面列举一些常用的，如果没有你符合的，都可以在上面的网站找到你想要的，而这些插件的使用的方法都差不多。

• gulp-imagemin - 压缩图片

• gulp-clean-css - 压缩css文件内容

• gulp-sass - 转化sass为css

• gulp-uglify - 压缩js文件内容

• gulp-less - 转化less为css

• gulp-concat - 合并js文件。

肯定还有其他的，自己找喽!

除此之外，还有一点要提到，就是这个网站 https://github.com/gulpjs/gulp/tree/master/docs/recipes。

里面有一些gulp的高级用法，可以去玩玩，比如browser-sync这个工具，来让css一更新，浏览器自动刷新等。

可以查看这篇文章：https://github.com/gulpjs/gulp/blob/master/docs/recipes/server-with-livereload-and-css-injection.md 。

另外，gulp 也可以和 webpack结合起来使用，查看这里：https://github.com/shama/webpack-stream

如果想写自己的gulp插件，可以看这篇文章 https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md 。

中文版本的也有 http://www.gulpjs.com.cn/docs/writing-a-plugin/ 。

完结。

相关链接

• 插件

• sindresorhus’ gulp plugins

• Gulp 入门指南

• Code examples for my Gulp.js tutorial series