前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结
博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧。
谈到gulp,有人可能就会想到另外一个构建工具grunt,那么 博主就要夸你一句:油啊热瘪死他。
那么grunt和gulp有什么异同点呢?
1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
3.高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
4.易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道
5.易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。高质量 Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。易学 Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。
如何使用gulp配置自己的项目
要想在项目中使用gulp,就要全局安装gulp,执行命令如下
npm install gulp -g 其中-g表示全局安装(node自己安装就可)
这样就算是在计算机上安装了全局gulp 也就意味着可以使用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等需要大家慢慢去研究。
在追求卓越的道路上,就是要不断的努力和总结,大家有啥疑问可以加群 474471759,找博主谈人生 谈理想。
前端自动化构建工具gulp的使用总结的更多相关文章
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 前端自动化构建工具gulp使用
1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...
- 前端自动化构建工具gulp
1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...
随机推荐
- python学习笔记--基础概要
1.python的int类型没有大小限制(或者说只受机器内存限制),str类型用单引号或者双引号都行,只要对称就可以了.(注意固定性) 2.使用[]表示存取字符串等序列的某一项(索引从0开始) 3.类 ...
- Handlebars.js的学习
写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...
- MVC自定义分页(附表跳转页Loading提示)
之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新分页,但是想直接用 ...
- 【转】Web测试方法
看到好文章,拿过来给大家分享分享! 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...
- SQL Server最近怎样了
SQL Server最近怎样了 又到年终了,大家都作最后冲刺 最近园子里真的多了很多口水帖,无论大家争论得多么激烈,时间依然滴答滴答地过,争论完之后我们依然要继续埋头苦干 为年终奖.为明年做准备 这里 ...
- UI控件(UIPickerView)
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...
- 使用JavaScript序列化任意复杂的对象
在phonegap的开发中,有时需要知道对象的所有属性,就简单的写了个序列化的方法. 序列化方法如下: function serialize(obj, name) { var result = &qu ...
- 扩展Bootstrap Tooltip插件使其可交互
最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们 ...
- ls /usr/linkapp 没反应
ls /usr/linkapp ll /usr/linkapp 都是一样无反应 没有任何反应, ctrl + c / ctrl + d 都不行 但是 ls /usr/linkapp/ | wc - ...
- LinuxThreads 和 NPTL
http://www.ibm.com/developerworks/cn/linux/l-threading.html Linux 线程模型的比较:LinuxThreads 和 NPTL 进行移植的开 ...