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. dos命令连接mysql并且查看编码方式

    打开cmd: 输入:mysql -hlocalhost -uroot -p 然后: show variables like 'char%';

  2. FTP webReq.ContentType异常的处理

    FtpWebRequest webReq; webReq = (FtpWebRequest)FtpWebRequest.Create(new Uri(updateFileUrl)); FtpWebRe ...

  3. Django视图之ORM连表操作一

    1 项目路径结构树 2 models创建类 from django.db import models class UserType(models.Model): ''' 用户类型 ''' title ...

  4. Highcharts创建一个简单的柱状图

    新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...

  5. new、operator new、placement new

    首先我们区分下几个容易混淆的关键词: new.operator new.placement new new和delete操作符我们应该都用过,它们是对堆中的内存进行申请和释放,而这两个都是不能被重载的 ...

  6. Monty Hall悖论

    Monty Hall悖论又称为蒙提·霍尔悖论.三门问题.Monty Hall是上个世纪60年代,电视游戏节目“Let's Make a Deal”的主持人,这个悖论便是以他的名字来命名的.节目的规则是 ...

  7. 《The art of software testing》的一个例子

    这几天一直在看一本书,<The art of software testing>,里面有一个例子挺有感触地,写出来和大家分享一下: [问题] 从输入对话框中读取三个整数值,这三个整数值代表 ...

  8. 【JBPM4】任务节点-任务分配swimlane

    swimlane泳道,几个任务受理人相同的任务节点,可以划分为一个泳道 JPDL <?xml version="1.0" encoding="UTF-8" ...

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

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

  10. Python函数式编程——map()、reduce()

    文章来源:http://www.pythoner.com/46.html 提起map和reduce想必大家并不陌生,Google公司2003年提出了一个名为MapReduce的编程模型[1],用于处理 ...