gulp

时间 2019-11-30

标签 gulp 栏目 JavaScript 繁體版

原文原文链接

1、gulp的安装javascript

2、gulp APIcss

2.1 gulp.srchtml

2.2 gulp.destjava

2.3 gulp.wacthnode

2.4 gulp.taskjquery

3、一些经常使用的gulp-plugingit

1、gulp的安装

1.1 全局安装gulp:

$ gulp

1.2 做为项目的开发依赖安装（devDpendencies）

$ npm install --save-dev gulp

1.3 在项目的更目录下建立一个名为 gulpfile.js 的文件

 1  var gulp = require('gulp');
 2 
 3  gulp.task('default', function() {
 4    //'defaul't 表示默认任务
 5    // code code code 
 6    // code code code 
 7  });

1.4 运行gulp:

$ gulp

注意：直接以gulp运行只会执行'default'默认任务,若想运行自定义的任务，请输入 gulp yourtask 。github

2、gulp API

2.1 gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。

将返回一个 Vinyl files 的 stream 它能够被 piped 到别的插件中。

1 gulp.src(./views/*.jade') //返回 client/templates/ 下的全部jade文件
2  .pipe(jade()) //须要引入gulp-jade, 编译 jade 模板
3  .pipe(gulp.dest('./build/templates'));//将编译后的文件存放到 build/templates 下

  注意：*.jade 表示全部jade文件;

2.2 gulp.dest(path[, options])

能被 pipe 进来，而且将会写文件。而且从新输出（emits）全部数据，所以你能够将它 pipe 到多个文件夹。若是某文件夹不存在，将会自动建立它。 shell

1 gulp.src(./scss/*.scss')
2   .pipe(sass()) //须要引入gulp-sass,把 scss 编译为 css 文件
3   .pipe(gulp.dest('./public/stylesheets'));

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。

相似的，相对路径也能够根据所给的 base 来计算。

2.3 gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件，而且能够在文件发生改动时候作一些事情。它总会返回一个 EventEmitter 来发射（emit） 事件。change

2.3.1 gulp.watch(glob [, opts], tasks)

glob

类型： String or Arraynpm

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变更。

opts

类型： Object

tasks

类型： Array

须要在文件变更后执行的一个或者多个经过 gulp.task() 建立的 task 的名字。

 1 var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
 2 watcher.on('change', function(event) {
 3   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 4 });

event.type

类型： String

发生的变更的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。

2.3.2 gulp.watch(glob [, opts, cb])

cb(event)

类型： Function

每次变更须要执行的 callback。

 1 gulp.watch('js/**/*.js', function(event) {
 2   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 3 });
 4

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变更：

2.4 gulp.task(name[, deps], fn)

2.4.1 定义一个名为 somename 的任务（task）

1 gulp.task('somename', function() {

2   // do something
3 };

name

任务的名字，若是你须要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。
运行上面这个任务，输入命令：

$ gulp somename

deps
类型： Array

一个包含任务列表的数组，这些任务会在你当前任务运行以前完成。

 
 
 
 
  
  
  
   
    1 gulp.task('mytask', ['task1', 'task2', 'task3', 'task4'], function() {
 2   // do something 
 3 });

当task Array 运行完以后才会运行mytask,即'task1', 'task2', 'task3', 'task4'运行完成才会运行mytask;

注意： 你的任务是否在这些前置依赖的任务完成以前运行了？请必定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn

该函数定义任务所要执行的一些操做。一般来讲，它会是这种形式：gulp.src().pipe(someplugin())。

如今能够结合上面的API来建立具体的任务啦！

2.4.1.1 获取开发须要的文件

 1 gulp.task('public', function () {
 2     /*javascript*/
 3     gulp.src(['node_modules/bootstrap/**/bootstrap.min.js',
 4               'node_modules/jquery/**/jquery.min.js'
 5              ])
 6         .pipe(rename({dirname: ''})) //除去原始文件路径，须要引入gulp-rename
 7         .pipe(gulp.dest('public/javascripts'));
 8 
 9     /*css*/

10     gulp.src(['node_modules/bootstrap/**/bootstrap.min.css'])
11         .pipe(rename({dirname: ''}))
12         .pipe(gulp.dest('public/stylesheets'));

13 //more

14 });

开发当中用npm安装的包会存放到'node_modules文件夹里

原始路径并不利于开发，上面的public任务就是为了把这些文件在coding前放到合适的位置；

运行public分别把js和css移动到开发者习惯的路径下。

.pipe(rename({dirname: ''})) 增长这一步的目的是除去原始文件路径；若是没有就会带有原始路径；

2.4.1.2 编译less/scss文件

 1 gulp.task('sass', function () {
 2   return gulp.src(['./scss/.scss'*, './scss/!(_)*.scss'])
 3     .pipe(sass({outputStyle: 'expanded'}).on('error', scss.logError))
 4     .pipe(gulp.dest('./public/stylesheets'));
 5 });

任务sass把scss编译为css文件后存放到指定的路径（./public/stylesheets）；

gulp.src(['./scss/.scss'*, './scss/!(_)*.scss']) 表示返回scss文件夹下面除了 _ 开头的scss文件；

outputStyle: 'expanded'，表示以expanded方式输出css，scss输出方式有4种：nested、expanded、compact、compressed。

2.4.1.3 编译jade文件

1 gulp.task('jade', function() {
2   return gulp.src('views/*.jade')
3     .pipe(plumber())
4     .pipe(gulpJade({
5       jade: jade,

6       pretty: true  //输出可视化的HTML
7     }))
8     .pipe(gulp.dest('./'))
9 });

任务jade把编译后的html文件存放到目录（./）;

pretty: true 做用是输出可视化的HTML；

2.4.1.4 建立监视任务

1 gulp.task('watchJade',function(){
2     gulp.watch('views/*.jade', ['jade'], function(event) {
3   console.log('File ' + event.path + ' was ' + event.type + ', running tasks "jade"');
4 });
5     console.log(' *.jade was watching...');
6 });

任务wacthJade，一旦views下的jade文件发生变化（added/changed）,便执行jade任务，从新编译；

第一个console.log是告诉会提示哪一个（些）文件发生了哪一种变化；

第二个console.log是告诉会提示文件正在被监视；

2.4.2 建立一个包含任务列表的数组，这些任务会在你当前任务运行以前完成。

 1 gulp.task('mytask', ['public', 'sass', 'jade', 'wacthJade'], function() {
 2   // do something
 3 });

命令行：

$ gulp mytask

任务执行的顺序是'public' , 'sass' , 'jade' , 'wacthJade' > 'mytask'。

2.3 异步任务支持

任务能够异步执行，若是 fn 能作到如下其中一点：

接受一个 callback


  
  
  
   
    
    1 // 在 shell 中执行一个命令
2 var exec = require('child_process').exec;
3 gulp.task('jekyll', function(cb) {
4   // 编译 Jekyll
5   exec('jekyll build', function(err) {
6     if (err) return cb(err); // 返回 error
7     cb(); // 完成 task
8   });
9 });

返回一个 stream 
  
  
  
   
    
     1 gulp.task('somename', function() {
 2   var stream = gulp.src('client/**/*.js')
 3     .pipe(minify())
 4     .pipe(gulp.dest('build'));
 5   return stream;
 6 });
 7

返回一个 promise 
  
  
  
   
    
     1 gulp.task('somename', function() {
 2   var stream = gulp.src('client/**/*.js')
 3     .pipe(minify())
 4     .pipe(gulp.dest('build'));
 5   return stream;
 6 });
 7

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行全部的 task 而且不作任何等待。若是你想要建立一个序列化的 task 队列，并以特定的顺序执行，你须要作两件事： （1）给出一个提示，来告知 task 何时执行完毕， （2）而且再给出一个提示，来告知一个 task 依赖另外一个 task 的完成。 对于这个例子，让咱们先假定你有两个 task，"one" 和 "two"，而且你但愿它们按照这个顺序执行： 在 "one" 中，你加入一个提示，来告知何时它会完成：能够再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。 在 "two" 中，你须要添加一个提示来告诉系统它须要依赖第一个 task 完成。 所以，这个例子的实际代码将会是这样： 
  
  
  
   
    
    1 gulp.task('somename', function() {
2   var stream = gulp.src('client/**/*.js')
3     .pipe(minify())
4     .pipe(gulp.dest('build'));
5   return stream;
6 });

3、一些经常使用的gulp-plugin

No.1 gulp-autoprofixer

No.2 gulp-concat

No.3 gulp-imagemin

No.4 gulp-jade

No.5 gulp-less

No.6 gulp-minify

No.7 gulp-sass

No.8 gulp-uglify

No.9 gulp-util

结尾附上github上gulp的一个gulpfile.js：

  1 var gulp = require('gulp');
  2 var coffee = require('gulp-coffee');
  3 var concat = require('gulp-concat');
  4 var uglify = require('gulp-uglify');
  5 var imagemin = require('gulp-imagemin');
  6 var sourcemaps = require('gulp-sourcemaps');
  7 var del = require('del');
  8 
  9 var paths = {
 10   scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
 11   images: 'client/img/**/*'
 12 };
 13 
 14 // Not all tasks need to use streams
 15 // A gulpfile is just another node program and you can use any package available on npm
 16 gulp.task('clean', function() {
 17   // You can use multiple globbing patterns as you would with `gulp.src`
 18   return del(['build']);
 19 });
 20 
 21 gulp.task('scripts', ['clean'], function() {
 22   // Minify and copy all JavaScript (except vendor scripts)
 23   // with sourcemaps all the way down
 24   return gulp.src(paths.scripts)
 25     .pipe(sourcemaps.init())
 26       .pipe(coffee())
 27       .pipe(uglify())
 28       .pipe(concat('all.min.js'))
 29     .pipe(sourcemaps.write())
 30     .pipe(gulp.dest('build/js'));
 31 });
 32 
 33 // Copy all static images
 34 gulp.task('images', ['clean'], function() {
 35   return gulp.src(paths.images)
 36     // Pass in options to the task
 37     .pipe(imagemin({optimizationLevel: 5}))
 38     .pipe(gulp.dest('build/img'));
 39 });
 40 
 41 // Rerun the task when a file changes
 42 gulp.task('watch', function() {
 43   gulp.watch(paths.scripts, ['scripts']);
 44   gulp.watch(paths.images, ['images']);
 45 });
 46 
 47 // The default task (called when you run `gulp` from cli)
 48 gulp.task('default', ['watch', 'scripts', 'images']);

View Code

地址：https://github.com/gulpjs/gulp