世界上最伟大的投资就是投资自己的教育

首页JavaScript
随风 · 练气

gulp 使用指南

随风发布于4107 次阅读

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');

// 定义了普通方法es6
gulp.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/ 这个网站可以找到所有的插件。

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

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

除此之外,还有一点要提到,就是这个网站 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/

完结。

相关链接

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
统计信息
    学员: 29897
    视频数量: 1996
    文章数量: 526

© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top