对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 ...
随机推荐
- DS1-2
#include <stdio.h> void PrintN_1(int i, int N); void PrintN_2(int i); int main() { int n; scan ...
- Day1 Python基础学习——概述、基本数据类型、流程控制
一.Python基础学习 一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编 ...
- Java中输出正则表达式匹配到的内容
import java.util.regex.Matcher; import java.util.regex.Pattern; public class A { public static void ...
- delete 删除对象属性
删除属性要直接删.
- Tesseract 模块
https://www.cnblogs.com/new-june/p/9249903.html
- python使用cx_Oracle在Linux和Windows下的一点差异
1. 主要是线程方面的差异. Windows下,把cx_Oracle.connect(connectedId)得到的handle传给定时器线程,主线程和和定时器可以用同一个handle. 但Linux ...
- 5.C#释放非托管资源1
释放非托管资源 在介绍释放非托管资源的时候,我觉得有必要先来认识一下啥叫非托管资源,既然有非托管资源,肯定有托管资源. 托管资源指的是.net可以自棕进行回收的资源,主要是指托管堆上分配的内存资源.托 ...
- python 判断字符串是否包含子字符串
第一种方法:in string = 'helloworld' if 'world' in string: print 'Exist' else: print 'Not exist' 第二种方法:fin ...
- iOS 上传自己的库到cocoapod
最近自己写了个库,传到github上,想让自己的库支持cocoapod,这里我看了很多相关文章.下面我就写下详细步骤以及会遇到的问题. 我们会使用trunk的方式提交到cocoa pod 这是2014 ...
- OEMCC 13.2 安装部署
需求:安装部署OEM 13.2 环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP:192.168.1.88 内存:12G+ 硬盘:100G+ OM ...