gulp基礎使用總結


gulp 安裝

1 檢測電腦有沒有安裝node
執行

$ node  -v  
$ npm -v 

如果沒有安裝的話,可以到https://nodejs.org/en/download/下載安裝。

2 全局安裝gulp

$ npm install --global gulp 

3 給對應的項目安裝gulp
執行

$ npm install gulp --save-dev

4 初始化項目目錄
執行 $ npm init 生成 package.json

在對應的根目錄下創建 gulpfile.js

文件中的基本內容為:

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

運行gulp

$ gulp 

安裝對應的 package

下面都以less的自動編譯功能需求為例子

這里介紹需要的package

gulp-less

gulp的less插件
安裝方法:

$ npm install gulp-less 

簡單使用舉例:

var less = require('gulp-less');
var path = require('path');
 
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

常用參數:
paths: 用於@import 指令的路徑的數組。
plugins: less插件的數組。舉例如下:
less 現在支持plugins,這可以增加額外功能

var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
 
return gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));

參考網站:
http://lesscss.org/usage/#plugins,
https://www.npmjs.com/package/gulp-less
http://lesscss.org/#using-less-configuration
http://lesscss.org/usage/#plugins

gulp-sourcemaps

gulp-less通常和gulp-sourcemaps一起使用產生對應的文件資源圖,這里需要初始化gulp-sourcemaps優先運行gulp-less編譯,然后寫資源圖,例如:

var sourcemaps = require('gulp-sourcemaps'); 
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./public/css'));

默認情況下,gulp-sourcemaps編寫內嵌在被編譯的css文件里的資源圖,為了將它們寫在單獨的文件里,可以在sourcemaps.write()里指定相對的文件路徑。

var sourcemaps = require('gulp-sourcemaps');
gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

gulp-notify

是gulp中基於vinyl文件或者使用節點通知模塊的各種電腦操作系統報的錯或者發送的信息,給出對應的通知和提醒。
安裝:

npm install --save-dev gulp-notify

然后將其放入gulpfile.js

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Hello Gulp!"));

或者:

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Found file: <%= file.relative %>!"));

gulp-plumber

阻止數據流因為其他gulp插件的錯誤提醒而中斷。
安裝:npm install --save-dev gulp-plumber
多與上述 gulp-notify中的onError()方法一同出現。

gulp.src("../test/fixtures/*")
      .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
      .pipe(through(function () {
        this.emit("error", new Error("Something happend: Error message!"))
      }));

參考網站:https://www.npmjs.com/package/gulp-notify

gulp模塊的方法

src()

用於產生數據流,可以傳入參數,也就是所要處理的文件,參數的寫法有:

less/example.less
less/*.less  less文件夾下的所有后綴為less文件
less/**/*.less less目錄及其所有子目錄中的所有后綴名為less的文件。
!less/example.less 除了example.less以外的所有文件。
*.+(js  css):匹配項目根目錄下,所有后綴名為js或css的文件。

改參數也可以是一個數組,指定多個成員,例如:

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

dest()

該方法將管道的輸出寫入文件,同時將這些輸出繼續輸出,所以可以依次調用多次dest方法,將輸出寫入多個目錄。如果有目錄不存在,將會被新建。
dest方法還可以接受第二個參數,表示配置對象。

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

配置對象有兩個字段。cwd字段指定寫入路徑的基准目錄,默認是當前目錄;mode字段指定寫入文件的權限,默認是0777

watch()

watch方法用於指定需要監視的文件。一旦這些文件發生變動,就運行指定任務。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

參考網站:http://javascript.ruanyifeng.com/tool/gulp.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM