Gulp入门教程
Gulp是一个前端构建工具,API也非常简单,学习起来很容易,Gulp使用的是NodeJS中pipe()管道来读取和操作数据,速度更快。Gulp上手非常快,使用起来也非常的方便。Gulp的运行流程很简单:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到Gulp的插件中,最后把处理后的流再通过pipe方法导入到gulp.dest()。下面雷雪松详细的讲解下Gulp如何使用。
1、Gulp安装
在当前项目中安装gulp,加–save-dev参数则表示开发时的依赖,会安装在package.json文件的devDependencies中。
[cc lang=”javascript” escaped=”true”]npm install gulp[/cc]
2、Gulp配置文件gulpfile.js,执行gulp test便会执行test任务,输入hello gulp!
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.task(‘test’,function(){
console.log(‘hello gulp!’);
});[/cc]
3、Gulp API详解: gulp.src()、gulp.dest()、gulp.task()、gulp.watch()
a、gulp.src()
通过提供的匹配模式传入一个字符串或者数组指定源文件。gulp通配符路径匹配示例:
“*”:匹配所有文件 例:src/*.less(包含src下的所有less文件)
“**”:匹配0个或多个子文件夹 例:src/**/*.less(包含src的0个或多个子文件夹下的less文件)
“{}”:匹配多个属性 例:src/{a,b}.less(包含a.less和b.less文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)
“!”:排除文件 例:!src/a.less(不包含src下的a.less文件)
[cc lang=”javascript” escaped=”true”]var gulp = require(‘gulp’);
gulp.src([‘js/*.js’,’css/*.css’])[/cc]
b、gulp.dest()
最终写入的目标文件夹,如果某文件夹不存在,将会自动创建它。
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.src(‘js/app.js’)
.pipe(gulp.dest(‘.dist’));[/cc]
c、gulp.task()
定义一个gulp任务,gulp不制指定任务则默认执行default任务。
[cc lang=”javascript” escaped=”true”]
//定义一个,依赖的dep的demo任务
var gulp = require(‘gulp’);
gulp.task(‘demo’, [‘dep’], function() {
// Do something
});[/cc]
d、gulp.watch()
用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务
[cc lang=”javascript” escaped=”true”]
var gulp = require(‘gulp’);
gulp.watch(‘js/**/*.js’, [‘reload’]);[/cc]
来源:Gulp入门教程
2017年9月9日 下午2:55
我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有20%折扣优惠!推荐“独享云虚拟主机”,建站首选!领券后会更便宜!
快下手,马上就要抢光了(进入阿里云优惠券领取页面,按需点击“立即领券”)
https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=tt20dhqq&productCode=qingcloud&utm_source=tt20dhqq
2017年9月19日 下午4:47
很好的网站
2017年9月29日 下午3:54
文章不错支持一下吧
2017年9月29日 下午4:55
不错 的教程 支持
2019年4月12日 下午1:39
很详细的教程,支持博主。
2019年5月5日 下午8:35
哇塞,居然是沙发?留个名
2019年5月11日 上午12:17
看过了。很好很强大。