您的位置：首页 > Web前端

前端自动化构建工具--gulp

2017-11-13 10:44 591 查看

前端自动化构建工具使用总结

gulp

新建文件夹managers,maneger下面新建两个文件夹dist和src，一个表示源头，一个表示输出，然后通过git bash工具在manager文件夹下执行命令

npm init (用于生成package.json文件)

执行结果如下

一路回车就行，最终得到的目录如下

然后就开始安装需要用到的插件，这里我做几个重要的说明一下，其他插件可以自己去摸索.

npm install gulp--save-dev（save-dev指的是把gulp配置到本项目的package.json文件下，因为你要使用人家的插件嘛 肯定需要它来指挥）
npm install gulp-uglify --save-dev(这个插件是用来压缩js的)
npm install gulp-ruby-sass --save-dev(这个是用来编译sass的)
npm install gulp-notify --save-dev(这个是提醒插件)

安装这三个插件，安装完成后你的package.json文件应该是这样的（不是这样的扇博主的face）

显而易见你在devDependdencies中看到了你安装的四个插件，现在就让我们来使用它们吧

首先，学会压缩js，在src文件夹下新建文件夹js以及gulpfile.js，并在js文件夹下新建文件index.js

下面重点来了，就是如何去自己写任务文件（gulpfile.js）

首先，在这里给大家简单说一下gulp重要的4个api

gulp.src()表示文件的来源 或者说是读取文件
gulp.dest()表示文件的输出 也就是输出文件
gulp.task()表示要执行的任务
gulp.watch()表示要监听的任务

具体的api请狠狠点击这里，不要留情面gulp

下面开始跟着我一起写任务吧

首先要引入需要的插件然后给gulp布置任务：如下：

然后你在git bash 上输入

gulp uglify(这个命令就是告诉gulp执行uglify任务，即：gulp+任务名字)

最后你会看到这么一个喜庆的画面

接着你会看到在你的dist文件夹下新生成了js文件夹里面有个index.js这个index.js就是压缩过后的。

然后或许有人会问了，那么如果我的js文件变动了，它会不会监听到呢？

这个问题问的相当有水平，很好，遇到这样提问的程序员，应该鼓励一下，（鼓励师如花何在）

在gulp你可以通过watch来监听js的改变，如下：

执行 gulp watch()

如下：

这个时候你去修改index.js文件你会发现如下图示：

这是为什么呢？哦原来是这样啊，当你改变你的js文件时候，gulp监听到了文件的改变，它就会去执行一次uglify任务，也就是你改一次它压缩一次。（突然想到了亚索好久没lol了）

是不是很有意思啊，我在写一个关于sass的任务，希望大家能够理解哈

注意（sass基于ruby,所以大家还要去安装ruby,不会的可以自行百度）

到此，我相信大家对gulp有个简单的认识了，也想跃跃欲试了，其实gulp还有很多插件，比如gulp-imagemin,gulp-rev,gulp-rev-collector，gulp-clean等需要大家慢慢去研究。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航