前端构建工具之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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
Vue computed 计算属性代码实例
Apr 22 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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字符串的连接的简单实例
2013/12/30 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
Python深入学习之内存管理
2014/08/31 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
护理专科毕业推荐信
2013/11/10 职场文书
六年级数学教学反思
2014/02/03 职场文书
金融管理应届生求职信
2014/02/20 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
事业单位个人总结
2015/02/12 职场文书
超市食品安全承诺书
2015/04/29 职场文书