gulp是什么？

gulp是一個(gè)基于流的構(gòu)建工具，可以自動(dòng)執(zhí)行指定的任務(wù)，簡(jiǎn)潔且高效

gulp能做什么

1.開發(fā)環(huán)境下，想要能夠按模塊組織代碼，監(jiān)聽實(shí)時(shí)變化
2.css/js預(yù)編譯，postcss等方案，瀏覽器前綴自動(dòng)補(bǔ)全等
3.條件輸出不同的網(wǎng)頁(yè)，比如app頁(yè)面和mobile頁(yè)面
4.線上環(huán)境下，我想要合并、壓縮 html/css/javascritp/圖片，減少網(wǎng)絡(luò)請(qǐng)求，同時(shí)降低網(wǎng)絡(luò)負(fù)擔(dān)
5.等等...

安裝gulp

npm install -g gulp        //全局安裝
npm install --save-dev gulp    //安裝到當(dāng)前項(xiàng)目并在package.json中添加依賴

核心API介紹

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

task()方法用于定義任務(wù)，傳入名字、依賴任務(wù)數(shù)組、函數(shù)即可，gulp會(huì)先執(zhí)行任務(wù)數(shù)組，結(jié)束后調(diào)用定義的函數(shù)，可以通過(guò)此手段控制任務(wù)的執(zhí)行順利。

例子：要定義一個(gè)任務(wù)build來(lái)執(zhí)行css、js、imgs這三個(gè)任務(wù)，我們可以通過(guò)指定一個(gè)任務(wù)數(shù)組而不是函數(shù)來(lái)完成。

gulp.task('build', ['css', 'js', 'imgs']);

gulp.src src(globs[, options])

src()方法輸入一個(gè)glob或者glob數(shù)組，然后返回一個(gè)可以傳遞給插件的數(shù)據(jù)流

Gulp使用node-glob來(lái)從你指定的glob里面獲取文件：

• app.js 精確匹配
• *.js 能匹配js后綴的文件
• **/*.js 能匹配多級(jí)目錄下的js文件（也包含當(dāng)前目錄下）
• !js/app.js 精確排除

例子：js目錄下包含了壓縮和未壓縮的js文件，我們想要壓縮還沒(méi)有被壓縮的文件

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.dest dest(path[, options])

dest()方法用來(lái)寫文件，第一個(gè)參數(shù)表示最終輸出的目錄名。注意，它無(wú)法允許我們指明最終輸出的文件名，只能指定輸出文件夾名，而且在文件夾不存在的情況下會(huì)自動(dòng)創(chuàng)建。

例子：把開發(fā)目錄src下的js文件輸出到部署目錄dist下

gulp.src('src/**/*.js')
  .pipe(gulp.dest('dist'))

gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)

watch()方法可以監(jiān)聽文件，它接受一個(gè)glob或者glob數(shù)組以及一個(gè)任務(wù)數(shù)組來(lái)執(zhí)行回調(diào)
// 當(dāng)templates目錄下的模板文件發(fā)生變化，自動(dòng)執(zhí)行編譯任務(wù)

gulp.task('watch', function (event) {
  gulp.watch('templates/*.tmpl.html', ['artTemplate']);
  console.log('Event type: ' + event.type); // added, changed, or deleted   
  console.log('Event path: ' + event.path); // The path of the modified file
});

Gulp.watch()的另一個(gè)非常好的特性是返回watcher對(duì)象

• watcher對(duì)象可以監(jiān)聽很多事件:
  • change 文件變化時(shí)觸發(fā)
  • end 在watcher結(jié)束時(shí)觸發(fā)
  • error 在出現(xiàn)error時(shí)觸發(fā)
  • ready 在文件被找到并正被監(jiān)聽時(shí)觸發(fā)
  • nomatch 在glob沒(méi)有匹配到任何文件時(shí)觸發(fā)
• Watcher對(duì)象也包含了一些可以調(diào)用的方法：
  • watcher.end() 停止watcher
  • watcher.files() 返回watcher監(jiān)聽的文件列表
  • watcher.add(glob) 將與指定glob相匹配的文件添加到watcher（也接受可選的回調(diào)當(dāng)?shù)诙€(gè)參數(shù)）
  • watcher.remove(filepath) 從watcher中移除個(gè)別文件

配置文件 gulpfile.js

image.png

任務(wù)會(huì)讓所有的文件匹配js/*.js，并且執(zhí)行JSHint，然后打印輸出結(jié)果，取消文件縮進(jìn)，最后把他們合并起來(lái)，保存為build/app.js，整個(gè)過(guò)程如下圖所示：

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});