对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 ...
随机推荐
- 小程 序swiper自适应宽高
https://blog.csdn.net/qq_31604363/article/details/73715944 小程 序swiper自适应宽高 小程 序swiper自适应宽高
- abap function module中的异常处理
1: 定义一个有异常抛出的function module. (zfm_moudle6), 该函数中有符合exceptions中的异常,将会自动将exceptions中的异常抛出. FUNCTION ...
- Django 框架 基本知识
一.什么事web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支持结构,使用框架可以使我们快速开发特定的系统,简单来说,就是讲实现方式的底层结构进行封装,提供相应的 ...
- 【LeetCode每天一题】Container With Most Water(容器中最多的水)
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...
- 配置opensips经验总结
主要参考https://www.cnblogs.com/Forever-Kenlen-Ja/p/7741776.html (ubuntu),还有https://blog.csdn.net/sunyun ...
- iOS UI布局-回到顶部
回到顶部,是比较常用的一个效果 核心代码 在ViewDidLoad中,添加回到顶部按钮 计算偏移量,如果当前显示的内容全部向上隐藏掉,则显示“回到顶部”按钮 // // ViewController. ...
- 执行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/ ...
- vue中使用导出表格功能
1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...
- jQuery-表格属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript-switch-case运用-案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...