前端构建工具之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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
js实现右键弹出自定义菜单
Sep 08 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
XENON基于JSON变种
2010/07/27 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
.net C#面试题
2012/08/28 面试题
教师个人考察材料
2014/12/16 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
辩论会主持词
2015/07/03 职场文书
导游词之昭君岛
2020/01/17 职场文书