gulp-uglify《JS压缩》----gulp系列(四)
本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录。
在系列(三)代码的基础上,再进行扩展。
1.找到gulp->config.js,对JS进行源目录(src->img)和输出目录(build->img)的配置:
2.gulp->tasks里新建JS任务,如下图:
3.同时在default任务序列里添加js任务:
gulp.task('default', ['less', 'images', 'js', 'watch']);
4.最后在watch里添加对src->js文件夹的监听:
watch(config.js.src, function(){ //监听所有js
gulp.start('js');
});
此时运行gulp,src->js文件下的图片就会被输出到build->js下,src->js的改动也会被监听。
(注意,删除一个JS,虽然会被监听,但是build->js里却不会删除,之后系列会添加另一个任务来解决这个问题,这里也暂时不做)
以上做完后,我们只是做了一个从 src->js 把图片输出到 build->js里的任务。现在再添加js压缩任务:
1.安装模块:
npm install --save-dev gulp-uglify
2.压缩任务:
可以直接插入在JS任务里,但是我们不这样做,只需要在项目部署时进行压缩,
我们在deploy任务,用来设置发布项目时需要执行的JS任务
tasks里修改deploy.js,代码如下:
var gulp = require('gulp'); gulp.task('deploy', ['less', 'uglify', 'imagemin']);
3.最后在tasks文件夹里新建uglify.js:
var uglify = require('gulp-uglify');
var gulp = require('gulp');
var config = require('../config').js; gulp.task('uglify', function(){
return gulp.src(config.src)
.pipe(uglify())
.pipe(gulp.dest(config.dest));
});
相比js任务,只是多了一个 压缩方法 —— pipe(uglify());
保存后,在命名行中运行 gulp deploy
压缩就执行成功了。
还是那句话多看官方文档。
>>> github 地址,请选择 uglify 分支<<<
gulp-uglify《JS压缩》----gulp系列(四)的更多相关文章
- 转:arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
- arcgis api for js入门开发系列四地图查询(含源代码)
备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- node.js+express+jade系列四:jade嵌套的使用
jade是express自带的模板引擎 jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板 例如 有一个主jade文件layout.jade,引用top.ja ...
- 使用gulp实现文件压缩及浏览器热加载
一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载. 先再命令行里输入 npm install gulp -g 下载gulp 二.创建gulp项目 创建一个你需要 ...
- 前端自动化之路之gulp,node.js
随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其 ...
- Webpack和Gulp,Webpack和Gulp的基本区别:
Gulp和Webpack的基本区别: gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加 ...
- 前端构建大法 Gulp 系列 (四):gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...
- gulp 实现 js、css,img 合并和压缩
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
随机推荐
- ATL字符串转换宏
有比MultiByteToWideChar和WideCharToMultiByte更简单的字符串转换宏,你相信吗?头文件 d:\program files\microsoft visual studi ...
- Disable multi finger touch in my app
http://stackoverflow.com/questions/12777435/disable-multi-finger-touch-in-my-app android:splitMotion ...
- ubuntu下安装 infer
sudo apt-get updatesudo apt-get upgradesudo apt-get install git openjdk-7-jdk m4 zlib1g-dev python-s ...
- Language
TODO Java(jdk8),Scala,Spring,Spark,Python,Linux,C,Netty,HttpClient,Hadoop YARN,RaspberryPi Jetty,Tom ...
- 今天踩过的坑——structs和spring
struts 如果实现了CookiesAware了,还需要引用org.apache.struts2.interceptor.CookieInterceptor过滤器,否则拿不到值同时还要能看到这样的错 ...
- Redis优化总结
# 注意在redis.conf中的小聚合数据类型的特殊编码设置(http://carlosfu.iteye.com/blog/2254572)```hash-max-zipmap-entries 64 ...
- Meaningful Use 中与HL7相关的消息及医疗文档
汇总 HL7 消息 入出转消息 ADT A01,A03,A04,A08 免疫消息 VXU V04 电子处方消息 NEWRX Message v8.1 EDIFACT, v8.1 XML, v10.6 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- Codeforces Beta Round #62 题解【ABCD】
Codeforces Beta Round #62 A Irrational problem 题意 f(x) = x mod p1 mod p2 mod p3 mod p4 问你[a,b]中有多少个数 ...
- Django 源码小剖: 初探中间件(middleware)
因为考虑到文章的长度, 所以 BaseHandler 的展开被推迟了. 在 BaseHandler 中隐藏着中间件的信息, 较常见的 SessionMiddleware 就已经默认安装. BaseH ...