说的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. 小程 序swiper自适应宽高

    https://blog.csdn.net/qq_31604363/article/details/73715944 小程 序swiper自适应宽高 小程 序swiper自适应宽高

  2. abap function module中的异常处理

    1: 定义一个有异常抛出的function module.  (zfm_moudle6),  该函数中有符合exceptions中的异常,将会自动将exceptions中的异常抛出. FUNCTION ...

  3. Django 框架 基本知识

    一.什么事web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支持结构,使用框架可以使我们快速开发特定的系统,简单来说,就是讲实现方式的底层结构进行封装,提供相应的 ...

  4. 【LeetCode每天一题】Container With Most Water(容器中最多的水)

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  5. 配置opensips经验总结

    主要参考https://www.cnblogs.com/Forever-Kenlen-Ja/p/7741776.html (ubuntu),还有https://blog.csdn.net/sunyun ...

  6. iOS UI布局-回到顶部

    回到顶部,是比较常用的一个效果 核心代码 在ViewDidLoad中,添加回到顶部按钮 计算偏移量,如果当前显示的内容全部向上隐藏掉,则显示“回到顶部”按钮 // // ViewController. ...

  7. 执行perl xttdriver.pl报错Can't locate Getopt/Long.pm in @INC

    环境:AIX 6.1 + Oracle 10.2.0.4 现象:在做xtts测试时,源环境使用Oracle自带的perl执行xttdriver.pl报错如下: $ $ORACLE_HOME/perl/ ...

  8. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  9. jQuery-表格属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. JavaScript-switch-case运用-案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...