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