说的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的理解和使用(一)的更多相关文章

  1. 对webpack和gulp的理解和区别

    webpack是前端构建工具,称为模块打包机,webpack支持模块化:构建前端开发过程中常用的文件,如:js,css,html,img等:使用简单方便,自动化构建.webpack是通过loader( ...

  2. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  3. 教你写gulp plugin

    前端开发近两年工程化大幅飙升.随着Nodejs大放异彩,静态文件处理不再需要其他语言辅助.主要的两大工具即为基于文件的grunt,基于流的gulp.简单来说,如果需要的只是文件处理,gulp绝对首选. ...

  4. Gulp安装及使用

    測试环境 Mac:10.10.4 Gulp:3.9.0 时间:2015年08月15日18:07:08 安装Gulp sudo npm install --global gulp npm install ...

  5. React.js入门必须知道的那些事

    首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...

  6. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. 【简单理解】gulp和webpack的区别

    Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...

  8. 理解 Gulp 和 Webpack(转)

    Gulp 和 webpack 之间的关系是十分暧昧的,却也经常被人误解,以为它俩是竞争关系,其实不然. Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易于掌控:而 webpack 的理 ...

  9. gulp 运用 的理解

    ugulp.task('build', function() { runSequence('clean', 'copy', ['uglify', 'sass', 'htmlmin'], 'base64 ...

随机推荐

  1. DS1-2

    #include <stdio.h> void PrintN_1(int i, int N); void PrintN_2(int i); int main() { int n; scan ...

  2. Day1 Python基础学习——概述、基本数据类型、流程控制

    一.Python基础学习 一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编 ...

  3. Java中输出正则表达式匹配到的内容

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class A { public static void ...

  4. delete 删除对象属性

    删除属性要直接删.

  5. Tesseract 模块

    https://www.cnblogs.com/new-june/p/9249903.html

  6. python使用cx_Oracle在Linux和Windows下的一点差异

    1. 主要是线程方面的差异. Windows下,把cx_Oracle.connect(connectedId)得到的handle传给定时器线程,主线程和和定时器可以用同一个handle. 但Linux ...

  7. 5.C#释放非托管资源1

    释放非托管资源 在介绍释放非托管资源的时候,我觉得有必要先来认识一下啥叫非托管资源,既然有非托管资源,肯定有托管资源. 托管资源指的是.net可以自棕进行回收的资源,主要是指托管堆上分配的内存资源.托 ...

  8. python 判断字符串是否包含子字符串

    第一种方法:in string = 'helloworld' if 'world' in string: print 'Exist' else: print 'Not exist' 第二种方法:fin ...

  9. iOS 上传自己的库到cocoapod

    最近自己写了个库,传到github上,想让自己的库支持cocoapod,这里我看了很多相关文章.下面我就写下详细步骤以及会遇到的问题. 我们会使用trunk的方式提交到cocoa pod 这是2014 ...

  10. OEMCC 13.2 安装部署

    需求:安装部署OEM 13.2 环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP:192.168.1.88 内存:12G+ 硬盘:100G+ OM ...