gulp基本用法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp基本用法相关的知识,希望对你有一定的参考价值。
Gulp
原文地址:http://www.ybao.org/book/gulp/828.html
一、简介
1.gulp.js是一个前端构建工具,与gruntjs类似。gulp使用node中的stream来读取和操作数据,其速度更快。
eg:每次修改代码都要做的编译ES6、sass、压缩html这些重复性工作。gulp脚本就是为了减少重复性工作而做的工作。
2.与grunt比较
1.性能更高
Grunt频繁的IO操作读写
读取A --> A.a() --> 写A --> 读取A --> A.b() --> 写A --> 读取A --> A.c() --> 写A --> complete/watch...
gulp是将项目任务流程以stream(流)的形式来做管道化处理
读取A并转为流信息 --> A.a() --> A.b() --> A.c() --> 写A --> complete/watch...
"流":读取文件时,不按常规那样把文件一口气写入内存中,而是把文件转为数据流,收到多少数据就处理多少数据,像经过竹筒的涓涓流水那样,有水源过来了就马上处理后再送出去,知道水源全部流过该竹筒。
2.健壮性更好
gulp走的是递归编译的解析方式,有助于项目优化的健壮性。
比如:我们使用sass来编写样式,其中b.scss引入了_a.scss文件,如果我们修改了_a.scss的内容,gulp会即时更新b.scss对应的b.css编译文件,但Grunt是基于缓存机制的,故不会重新编译b.scss文件,导致问题。
3.配置更简洁
二、gulp使用
1.gulpfile.js文件
var gulp = require("gulp");
gulp.task(‘default‘,function(){console.log("xxx")});
2.运行
gulp //运行默认任务
gulp 任务名 //运行特定任务
三、gulp API
1.gulp.src(globs[,options])
输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个stream可以被piped到别的插件中。
参数:
- globs--String或Array,所要读取的glob或者包含globs的数组
- options--Object通过glob-stream所传递给node-glob的参数
- options.buffer:默认值true,若为false,那么会以stream方式返回file.contents而不是buffer的形式。这在处理一些大文件时候会很有用。
options.read:默认值为true,若设置为false,那么file.contents会返回空值null,也就是并不会去读取文件。
options.base:String,将会加在glob之前。Grunt主要是以文件为媒介来运行它的工作流的,比如在Grunt中执行完一项任务后,会把结果写入到一个临时文件中,然后可以在这个临时文件内容的基础上执行其它任务,执行完之后又把结果写入到临时文件中...就这样反复下去。
而在Gulp中,使用的是node中的stram,首先获取到需要的stream,然后可以通过stream的pipe()方法把流写入到文件中。所以Gulp是以stream为媒介的,它不需要频繁的生成临时文件。
gulp.src()方法是用来获取流的,但是这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(Vinyl files),这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。
Gulp内部使用node-glob模块来实现文件匹配功能。
- * 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分割符出现在末尾。
能匹配a.js、x.y、abc、abc/、但不能匹配a/b.js **匹配路径中的0个或多个目录及子目录,需要单独出现,即它左右不能有其他东西,如果出现为末尾,也能匹配文件。
- ?匹配文件路径中的一个字符(不会匹配路径分割符)
[...]匹配方括号中出现的字符中的任意一个
gulp.src([‘js/.js‘,‘css/.css‘,‘*.html‘]);使用数组的方式可以很方便的使用排除模式,在数组中的单个匹配模式前加上!即是排除模式,但是这个不能用在数组的第一个元素中。
2.gulp.dest(path[,options])
能被pipe进来,并且将会写文件。并且重新输出所有数据,因此你可以将它pipe到多个文件夹。如果文件夹不存在,将会自动创建它。
- path: String or Function。写入文件的路径
- options.cwd:输出目录的cwd(当前工作目录)参数,只在所给的输出目录是相对路径时候有效
options.mode:String,默认为0777.八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。
gulp的使用流程:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp.dest()方法则把流中的内容写入到文件中。注意:我们给gulp.dest()传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名。它生成的文件名使用的是导入的文件流自身的文件名。
3.gulp.task(name[,deps],fn):用来定义任务
gulp.task("myTask",["array","task","name"],function(){...});
如果任务之间没有依赖,任务会按你书写的顺序去执行,如果有依赖则会先执行依赖的任务。
如果某个任务所依赖的任务是异步的,gulp不会等待所依赖的异步任务完成,而是会接着执行后续的任务。
如何解决所依赖的任务(异步任务)执行完之后再执行后续任务?
方案一:在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
gulp.task("one",function(callback){
setTimeout(function(){
console.log("one is done");
callback(); //执行回调函数,表示这个异步任务已经完成
},5000);
})
gulp.task("two",["one"],function(){
console.log("two is done");
});
方案二:定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。
gulp.task("one",function(){
var stream = gulp.src("js/**.js")
.pipe(dosomething())
.pipe(gulp.dest(‘build‘));
return stream;
});
gulp.task("two",["one"],function(){
console.log("two is done");
});
方案三:返回一个promise对象
var Q = require("q"); //一个著名的异步处理的库
gulp.task("one",function(){
var deferred = Q.defer();
setTimeout(function(){
deferred.resolve();
},5000);
return deferred.promise;
});
gulp.task("two",["one"],function(){
console.log("two is done");
});
4.gulp.watch(glob[,opts],tasks)
gulp.task("uglify",function(){
//dosomething;
});
gulp.task("reload",function(){
//dosomething;
});
gulp.watch("js/**.js",["uglify","reload"]);
gulp.watch(glob[,opts,cb]);
cb参数时一个函数。每当监视的文件发生变化时,就会调用这个函数,并且回给传入一个对象,该对象包含了文件变化的一些信息,type属性为变化的类型,added,changed,deleted;path属性是发生变化的文件的路径。
gulp.watch("js/**/*.js",function(event){
console.log(event.type);
console.log(event.path);
});
四、gulp常用插件
1.js文件压缩
npm install gulp-uglify --save-dev
var gulp = require("gulp"),
uglify = require("gulp-uglify");
gulp.task("minify-js",function(){
gulp.src("js/*.js") //获取文件流
.pipe(uglify()) //压缩js
.pipe(gulp.dest(‘dist/js‘)); //输出压缩后的js
});
2.重命名
npm install gulp-rename --save-dev
var gulp = require("gulp"),
rename = require("gulp-rename"),
uglify = require("gulp-uglify");
gulp.task("rename",function(){
gulp.src("js/jquery.js")
.pipe(uglify())
.pipe(rename("jquery.min.js"))
.pipe(gulp.dest(‘js‘));
})
3.css文件压缩
npm install gulp-minify-css
var gulp = require("gulp"),
monifyCss = require("gulp-minify-css");
gulp.task("minify-css",function(){
gulp.src("css/*.css")
.pipe(minifyCss())
.pipe(gulp.dest(‘dist/css‘));
});
4.html文件压缩
npm install gulp-minify-html --save-dev
var gulp = require(‘gulp‘),
minifyHtml = require("gulp-minify-html");
gulp.task(‘minify-html‘, function () {
gulp.src(‘html/*.html‘) // 要压缩的html文件
.pipe(minifyHtml()) //压缩
.pipe(gulp.dest(‘dist/html‘));
});
5.js代码检查
npm install gulp-jshint --save-dev
var gulp = require("gulp"),
jshint = require("gulp-jshint");
gulp.task("jsLint",function(){
gulp.src("js/*.js")
.pipe(jshint())
.pipe(jshint.reporter()); //输出检查结果
});
6.文件合并
npm install gulp-concat --save-dev
var gulp = require("gulp"),
concat = require("gulp-concat");
gulp.task("concat",function(){
gulp.src("js/*.js")
.pipe(concat("all.js"))
.pipe(gulp.dest("dist/js"));
});
7.图片压缩
npm install gulp-imagemin --save-dev
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var imagemin = require("imagemin-pngquant");
gulp.task("default",function(){
return gulp.src("src/images/*")
.pipe(imagemin({
progressive:true,
use:[pngquant()] //使用pngquant来压缩png图片
}))
.pipe(gulp.dest("dist"));
});
8.自动刷新
npm install gulp-liverreload --save-dev
该插件最好配合谷歌浏览器使用,且要安装livereload chrome extension扩展插件
var gulp = require("gulp"),
less = require("gulp-less"),
livereload= require("gulp-livereload");
gulp.task("less",function(){
gulp.src("less/*.less")
.pipe(less())
.pipe(gulp.dest("css"))
.pipe(livereload());
});
gulp.task("watch",function(){
livereload.listen();
gulp.watch("less/*.less",["less"]);
});
9.less和sass编译
npm install gulp-less --save-dev
var gulp = require("gulp"),
less = require("gulp-less");
gulp.task("compile-less",function(){
gulp.src("less/*.less")
.pipe(less())
.pipe(gulp.dest("dis/css"));
});
npm install gulp-sass --save-dev
var gulp = require("gulp"),
sass = require("gulp-sass");
gulp.task("compile-sass",function(){
gulp.src("sass/*.sass")
.pipe(sass())
.pipe(gulp.dest("dis/css"));
});
10.自动加载插件
npm install gulp-load-plugins --save-dev
自动加载package.json文件里的gulp插件。放置因插件过多而导致gulpfile.js文件中require(...)冗杂。
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
11.Browsersync
npm install -g browser-sync
监听静态文件,需要使用服务器模式。BrowserSync将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files路径是相对于运行该命令的项目
browser-sync start --server --files "css/*.css"
browser-sync start --server --files "**/*.css,**/*.html"
监听动态网站
如果您已经有其他本地服务器环境php或类似的,您需要使用代理模式。
BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
browser-sync start --proxy "主机名" "css/.css"
在本地创建了一个PHP服务器环境,并通过绑定BrowserSync.cn来访问本地服务器,使用一下命令方式,BrowserSync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/.css"
在gulpfile.js文件里使用
var gulp = require("gulp");
var browserSync = require("browser-sync").create();
//静态服务器
gulp.task("browser-sync",function(){
browserSync.init({
server:{
baseDir:"./"
}
});
});
//代理
gulp.task("browser-sync",function(){
browserSync.init({
proxy:"你的域名或IP"
});
});
通过流的方式创建任务流程,这样您就可以在任务完成后调用reload,所有的浏览器将被告知变化并实时更新。
var gulp = require("gulp"),
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var reload = browserSync.reload;
//静态服务器+监听scss/html文件
gulp.task("server",["sass"],function(){
browserSync.init({
server:"./app"
});
gulp.watch("app/scss/*.scss",["sass"]);
gulp.watch("app/*.html").on("change",reload);
});
//scss编译后的css将注入到浏览器里实现更新
gulp.task("sass",function(){
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(reload({stream:true}));
});
gulp.task("default",["server"]);
浏览器重载
gulp.task("js",function(){
return gulp.src("js/*.js")
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest("dist/js"))
});
//创建一个任务确保js任务完成之前能够持续响应
//浏览器重载
gulp.task("js-watch",["js"],browserSync.reload);
//使用默认任务启动BrowserSync,监听JS文件
gulp.task("server",["js"],function(){
//从这个项目的根目录启动服务器
browserSync({
server:{
baseDir:"./"
}
});
//添加browserSync.reload到任务队列里
//所有的浏览器重载后任务完成
gulp.watch("js/*.js",["js-watch"]);
});
手动重载
//使用变量引用reload方法
var reload = browserSync.reload;
//编译SASS&自动注入到浏览器
gulp.task("sass",function(){
return gulp.src("scss/style.scss")
.pipe(sass({includePaths:["scss"]}))
.pipe(gulp.dest("css"))
.pipe(reload({stream:true}));
})
//监听scss和html文件,当文件发生变化后做些什么
gulp.task("server",["sass"],function(){
browserSync({
server:{
baseDir:"./"
}
})
gulp.watch("scss/*.scss",["sass"]);
gulp.watch("*.html").on("change",browserSync.reload);
})
以上是关于gulp基本用法的主要内容,如果未能解决你的问题,请参考以下文章