前端构建工具之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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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下删除字符串中HTML标签的函数
2008/08/27 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php设计模式之委托模式
2016/02/13 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
什么是索引指示器
2012/08/20 面试题
年度考核自我鉴定
2013/11/09 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
财务部绩效考核方案
2014/05/04 职场文书
股份合作协议书
2014/09/10 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
redis配置文件中常用配置详解
2021/04/14 Redis
Nginx进程管理和重载原理详解
2021/04/22 Servers
Python类方法总结讲解
2021/07/26 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android