Gulp入门教程

分类:WEB前端 时间:

Gulp是一个前端构建工具,API也非常简单,学习起来很容易,Gulp使用的是NodeJS中pipe()管道来读取和操作数据,速度更快。Gulp上手非常快,使用起来也非常的方便。Gulp的运行流程很简单:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到Gulp的插件中,最后把处理后的流再通过pipe方法导入到gulp.dest()。下面PHP程序员雷雪松详细的讲解下Gulp如何使用。

1、Gulp安装
在当前项目中安装gulp,加–save-dev参数则表示开发时的依赖,会安装在package.json文件的devDependencies中。

1
npm install gulp

2、Gulp配置文件gulpfile.js,执行gulp test便会执行test任务,输入hello gulp!

1
2
3
4
var gulp = require('gulp');
gulp.task('test',function(){
console.log('hello gulp!');
});

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文件)

1
2
var gulp = require('gulp');
gulp.src(['js/*.js','css/*.css'])

b、gulp.dest()
最终写入的目标文件夹,如果某文件夹不存在,将会自动创建它。

1
2
3
var gulp = require('gulp');
gulp.src('js/app.js')
.pipe(gulp.dest('.dist'));

c、gulp.task()
定义一个gulp任务,gulp不制指定任务则默认执行default任务。

1
2
3
4
5
//定义一个,依赖的dep的demo任务
var gulp = require('gulp');
gulp.task('demo', ['dep'], function() {
// Do something
});

d、gulp.watch()
用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务

1
2
var gulp = require('gulp');
gulp.watch('js/**/*.js', ['reload']);

标签:
来源:Gulp入门教程

4 评论 “Gulp入门教程

    评论:
    2017年9月9日 下午2:55

    我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有20%折扣优惠!推荐“独享云虚拟主机”,建站首选!领券后会更便宜!
    快下手,马上就要抢光了(进入阿里云优惠券领取页面,按需点击“立即领券”)
    https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=tt20dhqq&productCode=qingcloud&utm_source=tt20dhqq

    essay代写 评论:
    2017年9月19日 下午4:47

    很好的网站

    快乐网讯 评论:
    2017年9月29日 下午3:54

    文章不错支持一下吧

    八皇子殿下 评论:
    2017年9月29日 下午4:55

    不错 的教程 支持

发表评论

电子邮件地址不会被公开。 必填项已用*标注