一、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 安装与使用的更多相关文章

  1. Gulp安装及配合组件构建前端开发一体化

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

  2. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  3. gulp安装和使用简介

    一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...

  4. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

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

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

  6. gulp安装及使用流程

    1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...

  7. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  8. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

  9. gulp安装成功但是无法使用

    gulp安装正常,但是查看gulp -v和使用gulp的时候报错, 原因:缺少环境变量或环境变量错误. 查找环境变量的方法:在dos下输入npm config get prefix就会显示一个地址,这 ...

  10. gulp安装说明

    1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查 ...

随机推荐

  1. 如何设置和使用MacOS上的Microsoft Office套件

    自30年前首次发布以来,Microsoft Office已成为全球最受欢迎的生产力套件之一.借助Word和Excel for Mac之类的程序,毫无疑问,MS Office套件在任何计算机上都是必须下 ...

  2. Vue学习笔记【26】——Vue路由(什么是路由)

    什么是路由 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源,这个对应关系就是后端中的路由: 前端路由:对于单页面应用程序来说,主要通过URL中的hash ...

  3. 最长上升子序列(LIS)问题

    最长上升子序列(LIS)问题 此处我们只讨论严格单调递增的子序列求法. 前面O(n2)的算法我们省略掉,直接进入O(nlgn)算法. 方法一:dp + 树状数组 定义dp[i]:末尾数字是i时最长上升 ...

  4. renren-fast-vue-动态路由-添加路由-方式一(直接在原有结构上添加)

    在原有文件夹夹下新建自己的组件 在 mock/modules/sys-menu.js 中引入 实现路由的添加

  5. LUOGU P5061 秘密任务(背包+二分图染色)

    传送门 解题思路 \(orz\)出题人的神仙做法.本蒟蒻看不懂,就水个求补图再二分图染色的方法来\(%1%\)出题人. 首先我们对图中\(m\)个关系连边,发现这样是没法做的,因为我们最后要关注的是谁 ...

  6. SVN——将VS项目提交至SVN时,怎样忽略bin和obj目录中的文件

    方法一: 通过设置SVN的Global ignore pattern值. 在设置了全局排除obj bin文件夹之后,需commit提交该项目,以使svn服务器应用该排除忽略 方法二: 具体实现 在解决 ...

  7. docker镜像管理和dockerfile详解(8)

    docker镜像加速 docker-io先到 https://cr.console.aliyun.com/ 注册一下,登录成功后,在控制台,看左侧,有一个加速器按钮,点开找到自己的专属加速链接,我的是 ...

  8. Android Dialog对话框的七种形式的使用

    参考资料:http://www.oschina.net/question/54100_32486 注:代码进行了整理 在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询 ...

  9. 关于iframe定位碰到的问题。

    这几天在做自动化测试的时候发现一个问题,用JQUERY定位时,总是报错,MES:JQUERY IS NOT DEFINED. 检查自己定位没有问题,后来想是不是语法出了问题. 切换成XPATH来定位, ...

  10. python redis demo

    上代码,redis-demo #!/usr/bin/env python #_*_ coding:UTF-8 _*_ import redis ####配置参数 host = '192.168.0.1 ...