安装 Gulp.js
Gulp 是基于 Node.js 的,故要首先安装 Node.js,完成之后执行下面的命令安装Gulp:
- npm install -g gulp
//- 执行全局安装 gulp,这样在任何地方都可以进行 gulp 操作
安装完之后,要在我们的项目中使用,需要在项目根目录(可以 **按住shift键并右击鼠标 ** 在此处打开命令窗口(W)),打开命令行,然后执行下面的命令:
- npm -f init
//- 强制生成一个 package.json,里面是一些常规的配置信息- npm install gulp --save-dev
//- 将 gulp 安装到项目目录内,并生成包依赖信息于 package.json 内的 devDependencies
安装Gulp插件
Gulp的任务都是以插件的形式存在的,所以在使用前,需要先安装我们用到的插件到项目目录内,插件的安装命令:
- 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:用于合并文件
创建配置文件 gulpfile.js
要使用 Gulp 还需要进行相关的配置,把我们的插件载入进来;
在项目根目录内创建一个** gulpfile.js 文件**(必须是这个文件名!!),内容如下:
- 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对我们的项目进行相关的操作;
使用 gulp 命令,运行Gulp.js构建程序
- gulp
//- 运行默认的 default task
gulp concat
//- 仅运行 concat 这一个 task
Gulp APIs
* gulp.task(name[, deps], fn)
//- 定义一个 task,声明它的名称, 任务依赖, 和任务内容.gulp.src(globs[, options])
//- 读取文件,参数为文件路径字符串或数组, 支持通配符.gulp.dest(path[, options])
//- 写入文件, 作为pipe的一个流程.文件夹不存在时会被自动创建.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])//- 监控文件,执行任务.