1. 全局安装 gulp:

npm install --global gulp

2.在项目目录下,用以下命令创建一个基本的package.json文件

npm init

3.安装Gulp

npm install --save-dev gulp

4.安装所需插件如:

npm install gulp-contrib-uglify --save-dev

5.在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');
//引入插件
var uglify = require('gulp-uglify'); //默认任务:把src/test.js压缩存入build文件夹
gulp.task('default', function() {
gulp.src('src/test.js')
.pipe(uglify())
.pipe(gulp.dest('build'));
});

6.运行gulp

gulp

压缩前:

压缩后

好文推荐:

http://javascript.ruanyifeng.com/tool/gulp.html

http://segmentfault.com/a/1190000002932998

前端工业化工具Gulp初体验的更多相关文章

  1. 前端工业化工具Grunt初体验

    今天来学学Grunt~~目的是为了自动化!自动压缩...自动修复...自动合并等... 提示:Grunt基于Node.js,安装之前要先安装Node.js 1.安装 grunt-cli npm ins ...

  2. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  3. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  4. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  5. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  6. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  7. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  8. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  9. gulp初体验记录(简介、插件开发介绍)

    目前用的业界比较知名的三个前端构建工具:grunt.gulp.fis,自己此前一直都是只在用grunt,fis看过一点,gulp则一直都没注意过,直到最近发现好像用的人越来越多,所以今天也就抽了点时间 ...

随机推荐

  1. swift 动态获取类, 获取命名空间

    在做swift开发中很多时候会动态加载控制器的类, 可以让app更加灵活显示界面信息 一般情况下都是服务器返回显示的控制器类name然后动态显示, 但是服务器返回的类name是string, 怎么转换 ...

  2. [LabVIEW架构]ActorFramework(一)

    前言 小黑结婚回来第二周了,每天忙于程序设计,时间比较紧张,所以文章一直没出来,也算憋大招了. 近期小黑将与大家一起认识一下ActorFramework,既是对自己一段时间写AF程序的总结,也是梳理, ...

  3. php中mvc新建页面

    PHP配置: <?phpclass appointmentController extends Controller{public function __construct(){parent:: ...

  4. django给视图添加缓存功能

    在开发过程中,有些视图只是查询数据,而且查询的数据一般不会变化.例如,做地址模块时,省市县都是不会变的.如果用户每次请求地址视图时,都要执行视图返回数据,会给服务端带来不必要的压力.这时候可以用到缓存 ...

  5. python基础(2)---数据类型

    1.python版本间的差异: 2.x与3.x版本对比 version 2.x 3.x print print " "或者print()打印都可以正常输出 只能print()这种形 ...

  6. AIOps实践三板斧:从可视化、自动化到智能化

    http://ai.51cto.com/art/201806/576881.htm?mobile

  7. head first (三):装饰者模式

    看到别人写的,都看不进去,算了还是自己手写一遍吧,算是帮助自己理解了.写的比较简单,例子也比较好懂,什么时候使用自己看着办. 1.定义 装饰者模式:动态地将职责附加到对象上.若要扩展功能,装饰者提供比 ...

  8. zabbix通过jvm监控tomcat

    说明:zabbix是通过jvm工具监控tomcat,zabbix server通过连接jvm代理服务器获取tomcat的各种参数 zabbix server:192.168.1.31 tomcat服务 ...

  9. php5.5 安装

    1.php安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo yum install zl ...

  10. Python3 文件操作基本语法

    对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 f = open('lyrics') #打开文件 first_line = f.readline() prin ...