安裝 Gulp.js
Gulp 是基于 Node.js 的赞辩,故要首先安裝 Node.js罩旋,完成之后執(zhí)行下面的命令安裝Gulp:
- npm install -g gulp
//- 執(zhí)行全局安裝 gulp鲫售,這樣在任何地方都可以進(jìn)行 gulp 操作
安裝完之后溺忧,要在我們的項目中使用微渠,需要在項目根目錄(可以 **按住shift鍵并右擊鼠標(biāo) ** 在此處打開命令窗口(W))霎苗,打開命令行,然后執(zhí)行下面的命令:
- npm -f init
//- 強(qiáng)制生成一個 package.json已艰,里面是一些常規(guī)的配置信息- npm install gulp --save-dev
//- 將 gulp 安裝到項目目錄內(nèi)痊末,并生成包依賴信息于 package.json 內(nèi)的 devDependencies
安裝Gulp插件
Gulp的任務(wù)都是以插件的形式存在的,所以在使用前哩掺,需要先安裝我們用到的插件到項目目錄內(nèi)凿叠,插件的安裝命令:
- npm install 插件名 --save-dev
//- 多個插件可以用空格分隔- 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)來盒件;
在項目根目錄內(nèi)創(chuàng)建一個** gulpfile.js 文件**(必須是這個文件名!!),內(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']);
運行 Gulp
通過以上的配置之后舱禽,就可以開始運行Gulp對我們的項目進(jìn)行相關(guān)的操作炒刁;
使用 gulp 命令,運行Gulp.js構(gòu)建程序
- gulp
//- 運行默認(rèn)的 default task
gulp concat
//- 僅運行 concat 這一個 task
Gulp APIs
* gulp.task(name[, deps], fn)
//- 定義一個 task,聲明它的名稱, 任務(wù)依賴, 和任務(wù)內(nèi)容.gulp.src(globs[, options])
//- 讀取文件,參數(shù)為文件路徑字符串或數(shù)組, 支持通配符.gulp.dest(path[, options])
//- 寫入文件, 作為pipe的一個流程.文件夾不存在時會被自動創(chuàng)建.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])//- 監(jiān)控文件,執(zhí)行任務(wù).