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. 苹果电脑Mac OS系统重装图文详解

    苹果电脑Mac OS系统重装图文详解 本文来自于[系统之家] www.xp85.com现在电脑都很强大,可是也很脆弱,常常需要你去维护,甚至经常需要你重装系统,那么Mac OS又如何重装系统呢?刚刚使 ...

  2. Linux设备驱动--内存管理

           MMU具有物理地址和虚拟地址转换,内存访问权限保护等功能.这使得Linux操作系统能单独为每个用户进程分配独立的内存空间并且保证用户空间不能访问内核空间的地址,为操作系统虚拟内存管理模块 ...

  3. 简单理解Hash算法的作用

    什么是Hash Hash算法,简称散列算法,也成哈希算法(英译),是将一个大文件映射成一个小串字符.与指纹一样,就是以较短的信息来保证文件的唯一性的标志,这种标志与文件的每一个字节都相关,而且难以找到 ...

  4. sqlserver 构架与性能优化

    太阳底下没有新鲜事 一.sqlserver 构架结构 1.查询优化器三阶段 1).找计划缓存如果找到直接使用 2).简单语句生成0开销的执行计划 3).正式优化 一般情况下优化到开销小于1.0就会停止 ...

  5. .NET 简单的递归使用场景

    什么是递归:自己调用自己,直到满足条件跳出 递归的缺点: 递归很耗内存,容易让机器挂掉 比如递归文件夹,当文件夹的层级有非常非常多的时候,就很容易挂掉,因为递归的时候把上层文件夹的上下文都保存在内存中 ...

  6. 前端读者 | 从一行代码里面学点JavaScript

    本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...

  7. Nginx错误:nginx: [error] OpenEvent("Global\ngx_reload_6252") failed (2: The system cannot find the file specified)

    执行nginx -s reload命令: nginx: [error] OpenEvent("Global\ngx_reload_6252") failed (2: The sys ...

  8. 架构设计之NodeJS操作消息队列RabbitMQ

    一. 什么是消息队列? 消息(Message)是指在应用间传送的数据.消息可以非常简单,比如只包含文本字符串,也可以更复杂,可能包含嵌入对象. 消息队列(Message Queue)是一种应用间的通信 ...

  9. 验收测试与UI

    CRS 如果功能复杂的情况下,是不是先写验收测试,然后写单元测试,最后写代码? STST 是的 从高往低走,无论是分析,还是测试,还是开发 从高往低走,带来的是干净无累赘的,底层依赖高层的优雅的结果 ...

  10. 第K短路模板【POJ2449 / 洛谷2483 / BZOJ1975 / HDU6181】

    1.到底如何求k短路的? 我们考虑,要求k短路,要先求出最短路/次短路/第三短路……/第(k-1)短路,然后访问到第k短路. 接下来的方法就是如此操作的. 2.f(x)的意义? 我们得到的f(x)更小 ...