gulp

前端 工具 / 组件
简单易用的流式构建系统
2019-11-05 我要评论 8 我要收藏

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

相关资源

gulp 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论