本教程是在会使用node的前提下,不会的同学请先去学习一下node。
gulp安装
1.全局安装(node安装自行百度学习,比较简单)
npm install -g gulp
2.在CLI 上cd到工作目录,eg:
cd e:/mynode/
3.通过命令自动配置package.json
npm install --save-dev gulp
4.安装依赖模块
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
模块介绍
jshint 代码验证工具
sass css代码预编译
concat 合并js
uglify 文件压缩
rename 文件重命名
5.在项目的根目录下新建gulpfile.js文件:
var gulp = require('gulp');//引入gulp模块
gulp.task('default', function() { //gulp方法
// place code for your default task here
});
gulp 四个方法
1.task
task方法是gulp用于定义一个具体任务的方法。如果需要执行任务,在终端执行gulp task-name。
task 方法的语法如:
gulp.task(task-name,function(){
//to do something
})
参数介绍:
task-name:string,任务名。在终端执行该任务:gulp task-name
2.src
方法是指定源文件的输入路径,pipe有点像是封闭的“流水线”,某个产品经过上一个工序处理后,就转入下一个工序去处理,直到完成。也就是将上一步的输出转化下一步的输入的中间者。
src语法:
gulp.src(glob,option);
参数介绍:
glob:类型:String 或 Array,指定源文件的路径,可以是单个路径,也可以是个路径数组。(路径匹配支持通配符)。
option:类型:Object,有3个属性buffer,read,base。
buffer:类型:Boolean,默认:true。如果该项被设置为 false,那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。
read:类型: Boolean 默认值: true。如果该项被设置为 false, 那file.contents 会返回空值(null),也就是并不会去读取文件。
base:类型: String 默认值.(没太理解这个参数- -|)
3.dest
能被 pipe 进来,并且将会写文件。并且重新输出所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
gulp.dest(path,option);
path:类型:String 或 Function,指定输出文件的文件夹路径,可以是字符串,也可以是一个返回文件夹路径的函数。
option:类型:Object,有2个属性cwd,mode。
cwd:类型:String,默认:process.cwd()设置输出文件夹路径的相对路径,默认为当前脚本的工作目录的路径。
mode:类型:String,默认:0777设置被创建文件夹的权限。
4.watch
watch方法是用于监听文件变化,文件一修改就会执行指定的任务。
语法:
gulp.watch(glob,option,task);
//or
gulp.watch(glob.option,cb);
参数:
glob:类型String 或 Array,指定源文件的路径,可以是单个路径,也可以是个路径数组。路径匹配和上述gulp.src()方法路径匹配的模式一样。
option:类型Object,有4个属性interval,debounceDelay,mode,cwd。
tasks:类型Array,监听到文件变化后,要被执行的任务的名字组成的数组。
cb(event)类型:Function,监听到变化后,回调的函数。会传递出一个对象类型的event参数。
event.type:类型:String,表示操作的类型:added, changed or deleted
event.path:类型:String,被修改文件的路径。
举个栗子
// 引入 gulp模块
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');//验证js
var sass = require('gulp-sass');//css预编译
var concat = require('gulp-concat');//合并js
var uglify = require('gulp-uglify');//压缩
var rename = require('gulp-rename');//重命名
// 检查脚本
gulp.task('lint', function() { //lint为执行命令,可在CLI上执行:gulp lint
gulp.src('./js/*.js') //通过通配符导入匹配的js文件
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并,压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){ //命令组合
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
运行
打开CLI:
gulp scripts
运行该命令后,scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。
总结
gulp学习起来还是很方便的。但他的实用功能正是不容小觑,gulp通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
Gulp中文网
gulp网