gulp 安装与使用
一、Gulp 是基于node.js 流(stream)的一个前端自动化构建工具,可以使用它构建自动化工作流程,简化我们工作量,让我们把重点放在功能的开发上,从而提高我们的开发效率和工作质量
我们可以用gulp自动刷新网页,对sass进行预处理、代码检测、图片优化压缩、这一切,只需要一个简单的指令就能全部完成。
二、开始安装
1、全局安装
cnpm install gulp -g
2、检查版本
gulp -v
3、本地安装gulp, 作为开发依赖
cnpm install gulp -D
二、使用
1、创建配置文件 (根目录下新建 gulpfile.js 文件)

console.log('gulp启动成功!'); //测试gulp是否启动成功
2、命令行执行gulp

三、使用实例
1、下载丑化工具(压缩)
【注意:gulp压缩时不支持es6语法,如果你有es6以上的语法,请先转译为es6在进行压缩】
cnpm i gulp-uglify --save-D
2、构建第一个 gulp 流程

- 命令行执行 gulp js

3、创建index.js
命令行执行 gulp js 后自动构建dist/index.js (index.js - ./dist/js/index.js)

4、任务演示 - 同时执行多个任务

命令行执行 glup some
四、监听
1、同时监听 less 和 js

2、任务演示 - 监听 js 改变,自动执行 js 压缩任务

命令行执行 glup watchjs
3、压缩成功

gulp 安装与使用的更多相关文章
- Gulp安装及配合组件构建前端开发一体化
原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...
- windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)
以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...
- gulp安装和使用简介
一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...
- Gulp安装使用教程
题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- gulp安装及使用流程
1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...
- gulp安装+一个超简单入门小demo
gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...
- Gulp安装及配合组件构建前端开发一体化(转)
Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...
- gulp安装成功但是无法使用
gulp安装正常,但是查看gulp -v和使用gulp的时候报错, 原因:缺少环境变量或环境变量错误. 查找环境变量的方法:在dos下输入npm config get prefix就会显示一个地址,这 ...
- gulp安装说明
1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查 ...
随机推荐
- Delphi 堆栈 [ heap(堆) 和 stack(栈) ]
程序需要的内存空间分为 heap(堆) 和 stack(栈); heap(堆) 是自由存储区, stack(栈) 是自动存储区; 使用 heap 需要手动申请.手动释放, 使用 stack 是自动申请 ...
- go类c语法
go类c语法 一般来说,如果一门语言具有类c语法,意味着当你习惯使用其他类c语言例如c.c++.java.javascript和c#,然后你就会发现go语言和它们也类似,至少表面上是.例如,使用&am ...
- 每天一个Linux命令:man(0)
man man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 格式 man [-adfhktwW] [section] [-M path] ...
- Android中对应用程序的行为拦截实现方式概要
这次是真的好长时间都没有写博客了,主要不是因为工作上的事,主要还是这个问题真的有点复杂,实现起来有点麻烦,所以研究了很长时间(大约有一个月的时间).但是幸好最后问题搞定了~~ 一.问题场景 想实现36 ...
- Python实现中英文翻译方法总结
#Author:Chenglong Qian #Copyright :Chenglong Qian import json import requests import re import os im ...
- (转)Linux C 多线程编程----互斥锁与条件变量
转:http://blog.csdn.net/xing_hao/article/details/6626223 一.互斥锁 互斥量从本质上说就是一把锁, 提供对共享资源的保护访问. 1. 初始化: 在 ...
- Guava环境设置
Guava本地环境设置 这部分指导如何下载和设置Java在机器上.请按照以下步骤来设置环境. Java SE免费提供链接:下载Java.所以,根据操作系统下载对应版本. 按照说明下载java和运行.e ...
- 【NodeJS】Error: Cannot find module 'ms'
报错原因: Error: Cannot find module 'ms' at Function.Module._resolveFilename (module.js::) at Function.M ...
- mariadb入门
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此社区采用分支的方 ...
- html5语义化标签大全
常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...