gulp教程之gulp中文API

2022-03-07 01:42:42 字數 2603 閱讀 6875

1.1、說明:src方法是指定需要處理的原始檔的路徑,gulp借鑑了unix作業系統的管道(pipe)思想,前一級的輸出,直接變成後一級的輸入,gulp.src返回當前檔案流至可用外掛程式;

1.2、globs:  需要處理的原始檔匹配符路徑。型別(必填):string or stringarray;

萬用字元路徑匹配示例:

「src/a.js」:指定具體檔案;

「*」:匹配所有檔案    例:src/*.js(包含src下的所有js檔案);

「**」:匹配0個或多個子資料夾    例:src/**/*.js(包含src的0個或多個子資料夾下的js檔案);

「{}」:匹配多個屬性    例:src/.js(包含a.js和b.js檔案)  src/*.(src下的所有jpg/png/gif檔案);

「!」:排除檔案    例:!src/a.js(不包含src下的a.js檔案);

var gulp = require('gulp'),

less = require('gulp-less');

gulp.task('testless', function

() /*.less'])

.pipe(less())

.pipe(gulp.dest('./css'));

});

1.3、options:  型別(可選):object,有3個屬性buffer、read、base;

options.buffer:  型別:boolean  預設:true 設定為false,將返回file.content的流並且不緩衝檔案,處理大檔案時非常有用;

options.read:  型別:boolean  預設:true 設定false,將不執行讀取檔案操作,返回null;

options.base:  型別:string  設定輸出路徑以某個路徑的某個組成部分為基礎向後拼接,具體看下面示例:

gulp.src('client/js/**/*.js')

.pipe(minify())

.pipe(gulp.dest('build')); //

writes 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', )

.pipe(minify())

.pipe(gulp.dest('build')); //

writes 'build/js/somedir/somefile.js'

2.1、說明:dest方法是指定處理完後檔案輸出的路徑;

gulp.src('./client/templates/*.jade')

.pipe(jade())

.pipe(gulp.dest('./build/templates'))

.pipe(minify())

.pipe(gulp.dest('./build/minified_templates'));

2.2、path:  型別(必填):string or function 指定檔案輸出路徑,或者定義函式返回檔案輸出路徑亦可;

2.3、options:  型別(可選):object,有2個屬性cwd、mode;

options.cwd:  型別:string  預設:process.cwd():前指令碼的工作目錄的路徑 當檔案輸出路徑為相對路徑將會用到;

options.mode:  型別:string  預設:0777 指定被建立資料夾的許可權;

3.1、說明:task定義乙個gulp任務;

3.2、name:  型別(必填):string 指定任務的名稱(不應該有空格);

3.3、deps:  型別(可選):stringarray,該任務依賴的任務(注意:被依賴的任務需要返回當前任務的事件流,請參看下面示例);

gulp.task('testless', function

() );

gulp.task('minicss', ['testless'], function () );

3.4、fn:  型別(必填):function 該任務呼叫的外掛程式操作;

4.1、說明:watch方法是用於監聽檔案變化,檔案一修改就會執行指定的任務;

4.2、glob:  需要處理的原始檔匹配符路徑。型別(必填):string or stringarray;

4.3、opts:  型別(可選):object 具體參看

4.4、tasks:  型別(必填):stringarray 需要執行的任務的名稱陣列;

4.5、cb(event):  型別(可選):function 每個檔案變化執行的**函式;

gulp.task('watch1', function

() );

gulp.task('watch2', function

() );

});

gulp教程記錄

gulp gulp能夠做什麼東西?以前這些工作都是人工做的 等等。gulp的配置檔案gulpfile.js 其實整個gulp的配置檔案,基本上都是在做一些任務的配置,比如建立任務,監聽任務等等 結合gulp的api gulp只有5個方法 gulp的使用 通過npm建立乙個專案 我的叫做gulp st...

gulp入門教程

gulp是什麼?在前端開發中,你是否有遇到以下這些問題?1 需要手動合併雪碧圖 2 需要手動壓縮js css 3 每次編寫完 後,需要手動重新整理瀏覽器看效果 4 手動壓縮 gulp的主要作用就是幫助我們自動完成上面的那些繁瑣的工作。安裝gulp gulp是基於node.js的,所以你需要先安裝no...

Gulp入門教程

gulp 是乙個 當前 非常流行的 構建工具,gulp 構建工具,是提供乙個基礎平台,上面可以編寫各種任務,比如,壓縮 的任務,編譯css檔案,轉換,web伺服器等等 任務.基本的使用方式 var gulp require gulp gulp.task default function consol...