对gulp的理解和使用(一)
说的gulp,到底是什么?用来做什么的?
以前并没有想过这个问题,拿到公司的项目脚手架就开始做事情了。现在专门来总结一下。
gulp干什么的呢?
gulp是node中的一种代码构建工具,还有就是项目自动化处理。说的这些是什么意思呢。听起来很牛批的样子。
自动化就是指一些重复的工作可以使用它来进行自动处理。比如自动创建文件
安装gulp:
#初始化项目package.json
npm init #全局安装gulp-cli
npm install gulp-cli -g #局部安装gulp
npm install gulp --save-dev
新建文件gulpfile.js:
这个文件必须存在,这是gulp命令的入口,里面是所有绑定的gulp任务命令
var gulp = require('gulp'); //默认任务
gulp.task('default',function(){
console.log("默认任务")
});
default是gulp默认命令,输入执行
我们试试使用gulp来打包文件:
这里需要安装2个包:gulp-uglify、gulp-concat
npm install gulp-uglify gulp-concat --save
然后引入并创建任务
gulp.src选取路径下文件(正则)
.pipe执行命令(貌似jquery)
uglify用于补完不规则的代码,去除注释
concat用于合并文件代码
如:
跟目录创建文件
执行gulp pack
最后生成
打包完成
扩展:
gulp和gulp-cli的区别:
gulp是用在nodejs代码中的对象,建议全局安装。
gulp-cli是用在cmd命令行中的命令头,建议全局安装。
因此gulp-cli在cmd使用,gulp在代码中使用。
--save-dev与--save区别:
npm install xxx -g //(全局安装)
npm install xxx --save-dev //(局部安装 显示在package.json的devDependencies中 开发环境)
npm install xxx --save //(局部安装 显示在package.json的dependencies中 运行环境)
npm install xxx //(局部安装 不显示)
对gulp的理解和使用(一)的更多相关文章
- 对webpack和gulp的理解和区别
webpack是前端构建工具,称为模块打包机,webpack支持模块化:构建前端开发过程中常用的文件,如:js,css,html,img等:使用简单方便,自动化构建.webpack是通过loader( ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- 教你写gulp plugin
前端开发近两年工程化大幅飙升.随着Nodejs大放异彩,静态文件处理不再需要其他语言辅助.主要的两大工具即为基于文件的grunt,基于流的gulp.简单来说,如果需要的只是文件处理,gulp绝对首选. ...
- Gulp安装及使用
測试环境 Mac:10.10.4 Gulp:3.9.0 时间:2015年08月15日18:07:08 安装Gulp sudo npm install --global gulp npm install ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- 【简单理解】gulp和webpack的区别
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- 理解 Gulp 和 Webpack(转)
Gulp 和 webpack 之间的关系是十分暧昧的,却也经常被人误解,以为它俩是竞争关系,其实不然. Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易于掌控:而 webpack 的理 ...
- gulp 运用 的理解
ugulp.task('build', function() { runSequence('clean', 'copy', ['uglify', 'sass', 'htmlmin'], 'base64 ...
随机推荐
- nginx的访问控制
一.基于Basic Auth认证与基于IP的访问控制 一.基于Basic Auth认证 Nginx提供HTTP的Basic Auth功能,配置了Basic Auth之后,需要输入正确的用户名和密码之后 ...
- python字符串前面加u,r,b的含义
转自:https://blog.csdn.net/u010496169/article/details/70045895 u/U:表示unicode字符串 不是仅仅是针对中文, 可以针对任何的字符串, ...
- [Java] Frequently used method or solutions for issues
模板: Split string into parts based on new line in java Solution: Reference is here. 1) get out of t ...
- js多个异步请求,按顺序执行next
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺 ...
- python threading
//test.py 1 import threading 2 import time 3 4 exitFlag = 0 5 6 class myThread (threading.Thread): 7 ...
- iOS 设计模式-NSNotificationCenter 通知中心
通知介绍 每一个应用程序都有一个通知中心(NSNotificationCenter)实例,专门负责协助不同对象之间的消息通信 任何一个对象都可以向通知中心发布通知(NSNotification),描述 ...
- 强力上攻后,在缓解期结束时,MACD将死叉,的后续情形
强力上攻后,在缓解期结束时,MACD将死叉,的后续情形
- vue中上传图片至阿里云oss
1.开通阿里云的oss服务这些这里就不多做介绍了 2.登入阿里云的后台管理系统创建一个Bucket 3.在后台管理系统中进入访问控制 4.点击用户管理->新建用户->填写相关信息,就生成了 ...
- HDU 1757 A Simple Math Problem(矩阵)
A Simple Math Problem [题目链接]A Simple Math Problem [题目类型]矩阵快速幂 &题解: 这是一个模板题,也算是入门了吧. 推荐一个博客:点这里 跟 ...
- 前端forEach在Array、map、set中的使用,weakset,weakmap
数组: var s = ['a','b','c']; s.forEach(function(ele,index,array){ console.log(ele); }); Map: var map = ...