前端构建工具之gulp的配置与搭建详解


Posted in Javascript onJune 12, 2017

前言

在如今的前端开发中,已经不再是一些静态文件了。

对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面:

      1、许多第三方库的依赖需要自动运行

      2、独立的前端测试需要自动运行

      3、代码需要发布时打包

一、为什么要使用gulp?

在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务。

说了这么多,那么gulp到底能做什么?

      a.创建项目工程

      b.压缩各类文件

      c.文件合并

      d.自动化监视

      e.实时调试代码

      f.编译less,Sass,CoffeeScript......等等

二、gulp是基于node开发运行的,所以我们可以使用npm的包管理工具去安装它。

要使用npm,就必须安装node。node安装很简单,只需下一步即可,这里不再赘述。

在gulp下载配置前,我们先搭建好本地项目文件:

前端构建工具之gulp的配置与搭建详解
文件构架树

完成以后,在控制台cdm调出控制台输入以下命令:

      1、npm install -g gulp //-g 代表全局安装 ( 如果不是全局安装你是用不了的)

      2、cd 你的项目路径 npm init //package.json

      3、npm install gulp --save-dev

前端构建工具之gulp的配置与搭建详解
配置完成的文件构架树

注:gulpfile.js这个文件的名字是不能改变的。

三、gulp的配置以及任务

在gulpfile.js这个文件中输入一下:

前端构建工具之gulp的配置与搭建详解
引入gulp

前端构建工具之gulp的配置与搭建详解

第一个实例

前端构建工具之gulp的配置与搭建详解

gulp运行

到这里基本配置就可以了。

总结

以上就是这篇文章的全部内容了,下一篇我们开始说说gulp语法。希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
微信小程序 自定义Toast实例代码
Jun 12 #Javascript
Angular4 中常用的指令入门总结
Jun 12 #Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 #Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 #Javascript
JavaScript初学者必看“new”
Jun 12 #Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 #Javascript
You might like
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
浅析PHP开发规范
2018/02/05 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
Python学习资料
2007/02/08 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
银行见习期自我鉴定
2014/01/29 职场文书
团日活动总结书格式
2014/05/08 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年派出所工作总结
2014/11/21 职场文书
市场部岗位职责
2015/02/12 职场文书
刑事附带民事代理词
2015/05/25 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL