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. 2017多校第7场 HDU 6129 Just do it 找规律

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6129 题意:求a序列后m次xor前缀和 解法: 手动对1位置对每个位置的贡献打表发现 第一次 贡献为 ...

  2. [New learn]讲解Objective-c的block知识

    1.简介 OC的Block感觉就是C中饿函数指针,提供回调功能,但是OC中的block比C的函数指针要更加强大,甚至可以访问本地变量和修改本地变量. block在oc中是一个对象,它可以像一般的对象那 ...

  3. mysql innodb 数据表不存在

    方法一: https://dev.mysql.com/doc/refman/5.5/en/forcing-innodb-recovery.html 修改my.cnf文件 [mysqld] innodb ...

  4. HDU-1671

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. LeetCode解题报告—— Linked List Cycle II & Reverse Words in a String & Fraction to Recurring Decimal

    1. Linked List Cycle II Given a linked list, return the node where the cycle begins. If there is no ...

  6. Grid++Report 注册

    regsvr32  "D:\Grid++Report 5.0\gregn50.dll" regsvr32  "D:\Grid++Report 5.0\grdes50.dl ...

  7. Jquery当div超出页面时就固定到顶部否则跟随页面滚动

    $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top ...

  8. Django学习过程中的排错总结

    报错一:RuntimeError: You called this URL via POST, but the URL doesn't end in a slash and you have APPE ...

  9. bzoj 1407 扩展欧几里德

    思路:枚举洞穴个数,用扩展欧几里德暴力判断没两个人的周期. #include<bits/stdc++.h> #define LL long long #define fi first #d ...

  10. .Net WebAPI 增加Swagger

    第一部分:创建项目 选择Web/ASP.NET Web Application 这里我选择的是WebAPI,并且增加MVC和Web API,权限部分选择无权限 第二部分:增加EF连接 因为项目需要连接 ...