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. 算法题之Median of Two Sorted Arrays

    这道题是LeetCode上的题目,难度级别为5,刚开始做没有找到好的思路,以为是自己智商比较低,后来发现确实也比较低... 题目: There are two sorted arrays nums1  ...

  2. iOS 适配/ autoLayout基本知识

    历史 iPhone3GS.iPhone4\4s:没有屏幕适配最早开发里面的程序全部都是写死的 iPad 旋转出来之后 Autoresizing问世iPhone5\5c\5s兼容各种不同的情况 系统适配 ...

  3. 【java报错】Unknown character set index for field '224' received from server.

    在捣腾免费数据库时,使用的一个数据库提供商的服务器使用utf8mb4编码,而我的jar包还是八百年前的.然后...然后就报错了... (1) MYSQL 5.5 之前, UTF8 编码只支持1-3个字 ...

  4. 安装sysstat出现软件包依赖问题

    需要使用Linux性能分析工具iostat 和sar等, 这就需要安装软件包sysstat 在Ubuntu 12.04下运行sudo apt-get install sysstat,出现如下问题: 开 ...

  5. FineReport——决策系统组件API

    FineReport数据决策系统中自定义主题包API接口由5大部件组成:框架布局.目录树组件.多tab组件.Navigation组件和Gallery组件. 首先,对theme.js进行总体配置: (f ...

  6. Codeforces 707C Pythagorean Triples(构造三条边都为整数的直角三角形)

    题目链接:http://codeforces.com/contest/707/problem/C 题目大意:给你一条边,问你能否构造一个包含这条边的直角三角形且该直角三角形三条边都为整数,能则输出另外 ...

  7. Django-form組件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一.创建Form类 1 2 3 4 5 6 7 ...

  8. hdu5798

    官方题解: 考虑去掉abs符号,发现只有相邻两个数的最高位被影响了才会影响abs的符号,所以可以按照最高位不一样的位置分类,之后考虑朴素枚举x从0到2^20,每次的复杂度是O(400),无法通过,考虑 ...

  9. 6.Spark streaming技术内幕 : Job动态生成原理与源码解析

    原创文章,转载请注明:转载自 周岳飞博客(http://www.cnblogs.com/zhouyf/)   Spark streaming 程序的运行过程是将DStream的操作转化成RDD的操作, ...

  10. GraphQL学习

    视频地址:https://www.youtube.com/watch?v=Y0lDGjwRYKw&list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f GraphQL ...