Gulp

简单易用的流式构建系统

gulp

The streaming build system

NPM version Downloads Support us Build Status Coveralls Status Gitter chat

What is gulp?

gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. For web development (if that's your thing) it can help you by doing CSS preprocessing, JS transpiling, minification, live reloading, and much more. Integrations are built into all major IDEs and people are loving gulp across PHP, .NET, Node.js, Java, and more. With over 1700 plugins (and plenty you can do without plugins), gulp lets you quit messing with build systems and get back to work.

Documentation

For a Getting started guide, API docs, recipes, making a plugin, etc. see the documentation page!

Sample gulpfile.js

This file will give you a taste of what gulp does.

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

Incremental Builds

We recommend these plugins:

  • 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

Want to contribute?

Anyone can help make this project better - check out the Contributing guide!

Like what we do?

Support us via Gratipay

Bitdeli Badge

gulp

流式构建系统

NPM version Downloads Support us Build Status Coveralls Status Gitter chat

gulp 是什么?

gulp 是一个帮助你在开发过程中自动完成繁重和耗时的工作任务。对于 web 开发(如果这就是你的工作),它能帮助你预处理 CSS,JS压缩,transpiling 和 live reloading,以及其他更多工作。

所有主流的集成开发环境(IDE)都内置了 gulp。开发者喜欢通过 PHP, .NET, Node.js, Java 等使用 gulp。With over 1700 plugins (and plenty you can do without plugins), gulp lets you quit messing with build systems and get back to work.

文档

入门指南,API 文档,创建一个插件,等等,请查看 文档页面

1、 全局安装 gulp :

$ npm install --global gulp

2、 在你的项目开发依赖中安装 gulp:

$ npm install --save-dev gulp

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

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

4、运行 gulp

$ gulp

默认的任务将会启动并且没有做任何事。

要运行单独的任务,请使用 gulp <task> <othertask>

API 文档

查看:https://github.com/gulpjs/gulp/blob/master/docs/API.md

可用插件

请到这里:http://gulpjs.com/plugins/ 搜索

例子 gulpfile.js

这个文件将会让你体验到 gulp 做了什么:

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

增量构建

我们推荐这些插件:

  • 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

想贡献代码?

任何人都能帮助我们将这个项目做得更好 - 查看 贡献指南!

喜欢我们的工作成果?

Support us via Gratipay

Bitdeli Badge

相关资源

讨论区