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. 【bzoj1026】windy数

    江泽OJ好,远离bzoj保平安. 仍然沿用之前的记忆化搜索的办法即可. #include<bits/stdc++.h> #define N 10010 using namespace st ...

  2. 手机User-Agent

    iPhone  6(IOS 8.1.2):Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KH ...

  3. javascript 实现图片拖动

    javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...

  4. ZOJ-3318

    Strange Country Time Limit: 1 Second      Memory Limit: 32768 KB There are n cities in the dream cou ...

  5. 我XXXX!!!够了!!!从github拉到dockerhub,再用daocloud加速下载

    史上比较曲折的救国方式了... 先在git hub上申请帐号,导入dockerfile. 然后在docker hub上关联git hub帐号作自动构建. 再用daocloud作加速,将docker i ...

  6. SPOJ - SUBST1 D - New Distinct Substrings

    D - New Distinct Substrings 题目大意:求一个字符串中不同子串的个数. 裸的后缀数组 #include<bits/stdc++.h> #define LL lon ...

  7. bzoj 1407 扩展欧几里德

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

  8. ubuntu16.04编译安装GPAC

    参考:http://blog.csdn.net/tianlong_hust/article/details/9273875 1.获取gpac的源代码 sudo apt-get install subv ...

  9. ThoughtWorks测试

    Fizz-Buzz-Whizz 问题描述: 1. 你首先说出三个不同的特殊数,要求必须是个位数,比如3.5.7. 2. 让所有学生拍成一队,然后按顺序报数. 3. 学生报数时,如果所报数字是第一个特殊 ...

  10. scrapy抓取拉勾网职位信息(四)——对字段进行提取

    上一篇中已经分析了详情页的url规则,并且对items.py文件进行了编写,定义了我们需要提取的字段,本篇将具体的items字段提取出来 这里主要是涉及到选择器的一些用法,如果不是很熟,可以参考:sc ...