gulp學(xué)習(xí)指南

安裝 Gulp.js

Gulp 是基于 Node.js 的,故要首先安裝 Node.js,完成之后執(zhí)行下面的命令安裝Gulp:

  • npm install -g gulp
    //- 執(zhí)行全局安裝 gulp,這樣在任何地方都可以進(jìn)行 gulp 操作

安裝完之后,要在我們的項(xiàng)目中使用,需要在項(xiàng)目根目錄(可以 **按住shift鍵并右擊鼠標(biāo) ** 在此處打開命令窗口(W)),打開命令行,然后執(zhí)行下面的命令:

  • npm -f init
    //- 強(qiáng)制生成一個(gè) package.json,里面是一些常規(guī)的配置信息
  • npm install gulp --save-dev
    //- 將 gulp 安裝到項(xiàng)目目錄內(nèi),并生成包依賴信息于 package.json 內(nèi)的 devDependencies

安裝Gulp插件

Gulp的任務(wù)都是以插件的形式存在的,所以在使用前,需要先安裝我們用到的插件到項(xiàng)目目錄內(nèi),插件的安裝命令:

  • npm install 插件名 --save-dev
    //- 多個(gè)插件可以用空格分隔
  • npm install gulp-util gulp-uglify gulp-concat --save-dev
    //- 安裝gulp-util、gulp-uglify 和 gulp-concat插件
    //- gulp-uglify:用于壓縮js
    //- gulp-concat:用于合并文件

創(chuàng)建配置文件 gulpfile.js

要使用 Gulp 還需要進(jìn)行相關(guān)的配置,把我們的插件載入進(jìn)來;

在項(xiàng)目根目錄內(nèi)創(chuàng)建一個(gè)** gulpfile.js 文件**(必須是這個(gè)文件名!!),內(nèi)容如下:

  • var gulp = require('gulp');
    var gutil = require('gulp-util');
    var uglify = require('gulp-uglify');
    var concat = require('gulp-concat');
    //- 通過 require() 載入我們需要用到的插件~
    gulp.task('concat', function () {
    gulp.src('./scripts/*.js')
    .pipe(uglify())
    .pipe(concat('jkd.min.js'))
    .pipe(gulp.dest('./build/js'));
    });
    gulp.task('default', ['concat']);

運(yùn)行 Gulp

通過以上的配置之后,就可以開始運(yùn)行Gulp對我們的項(xiàng)目進(jìn)行相關(guān)的操作;
使用 gulp 命令,運(yùn)行Gulp.js構(gòu)建程序

  • gulp
    //- 運(yùn)行默認(rèn)的 default task
    gulp concat
    //- 僅運(yùn)行 concat 這一個(gè) task

Gulp APIs

* gulp.task(name[, deps], fn)
//- 定義一個(gè) task,聲明它的名稱, 任務(wù)依賴, 和任務(wù)內(nèi)容.gulp.src(globs[, options])
//- 讀取文件,參數(shù)為文件路徑字符串或數(shù)組, 支持通配符.gulp.dest(path[, options])
//- 寫入文件, 作為pipe的一個(gè)流程.文件夾不存在時(shí)會(huì)被自動(dòng)創(chuàng)建.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])//- 監(jiān)控文件,執(zhí)行任務(wù).

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容