gulpgulp入门


备注

Gulp是一个JavaScript构建系统,基于node.js的任务运行器,如Grunt。它允许您在开发过程中自动执行常见任务。 Gulp使用streams -concept和code-over-configuration来实现更简单,更直观的构建过程。代码配置概念允许创建更可读和更简单的任务,而任务高度过度配置。

版本

发布日期
3.4 2014年1月17日
3.7 2014-06-01
3.8 2014年6月10日
3.9 2015年6月2日
3.9.1 2016年2月9日
4.0.0 2016年6月21日

使用gulp在子文件夹中的Concat js文件

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});
 

gulp CLI文档

gulp很少有人知道。所有其他标志用于在需要时使用的任务。

  • -v--version 将显示全局和本地gulp版本
  • --require <module path> 在运行gulpfile之前需要一个模块。这对于转换器很有用,但也有其他应用程序。您可以使用多个--require 标志
  • --gulpfile <gulpfile path> 将手动设置--gulpfile <gulpfile path> 。如果你有多个gulpfiles很有用。这也将CWD设置为gulpfile目录
  • --cwd <dir path> 将手动设置CWD。搜索gulpfile以及所有需求的相关性将从这里开始
  • -T--tasks 将显示已加载的gulpfile的任务依赖关系树
  • --tasks-simple 将显示加载的gulpfile的明文任务列表
  • --color 将迫使大口和咽的插件来显示颜色未检测到彩色支持即使当
  • --no-color 即使检测到颜色支持, --no-color 也会强制gulp和gulp插件不显示颜色
  • --silent 将禁用所有gulp日志记录

CLI添加了process.env.INIT_CWD,这是它从中启动的原始cwd。

任务特定标志

有关如何添加任务特定标志的信息,请参阅此StackOverflow链接

任务

可以通过运行gulp <task> <othertask> 来执行gulp <task> <othertask> 。只需运行gulp 就会执行您注册的名为default 的任务。如果没有default 任务gulp就会出错。

编译器

您可以在解释时找到支持的语言列表。如果您想添加对新语言的支持,请发送拉请求/打开问题。

安装或设置

1.安装Node.js和NPM:

Gulp需要Node.js和NPM,Node的包管理器。大多数安装程序包括NPM和Node.js.通过在终端中运行以下命令, 请参阅安装文档或确认已安装该文档

npm -v
// will return NPM version or error saying command not found
 

2.全局安装gulp:

如果您以前在全球安装了npm rm --global gulp 版本,请运行npm rm --global gulp 以确保您的旧版本不会与gulp-cli发生冲突。

$ npm install --global gulp-cli
 

3.初始化项目目录:

$ npm init
 

4.在项目devDependencies中安装gulp:

$ npm install --save-dev gulp
 

5.在项目的根目录下创建gulpfile.js:

var gulp = require('gulp');

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

6.运行gulp:

$ gulp
 

默认任务将运行并且不执行任何操作。

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

任务依赖

您可以通过将第二个参数传递给gulp.task()gulp.task() 运行任务。

此参数是在任务运行之前要执行和完成的任务数组:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});
 

如果您只想运行一组依赖任务,也可以省略该函数:

gulp.task('build', ['array', 'of', 'task', 'names']);
 

注意:任务将并行运行(一次性完成),因此不要假设任务将按顺序启动/完成。 开始一饮而尽V4gulp.series() 应该如果依赖任务执行的顺序是非常重要的使用。