Gulp压缩JavaScript代码
因为gulp是自动化工具,所以我们得告诉它,需要怎么做,才能达到我们的目的。
我们首先得新建一个js文件,用来编写我们的需求,以便gulp能按着我们的意愿来执行。
我将这个js文件取名叫gulpfile.js( 且必须取为gulpfile名,否则在node环境下运行是,会报错:No gulpfile found)
gulpfile.js 的文件内容是
- //引入gulp
- var gulp = require('gulp');
- //引入gulp-uglify模块,用于压缩JS
- var uglify = require('gulp-uglify');
- //'minjs'为我们自定义的任务名,匿名函数为'minjs'具体任务
- gulp.task('minjs', function(){
- // 'script/*.js'是需要压缩的js文件
- gulp.src('script/*.js')
- //uglify()是调用的压缩方法,去压缩js
- .pipe(uglify())
- //gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
- .pipe(gulp.dest('newScript'));
- });
然后我们在script文件夹下新建test.js,文件内容自己定,我的是这个样子
然后我们用命令法
但是我们会发现报错
我们需要安装uglify
安装好uglify之后再次执行gulp minjs
打开script下的js文件,会发现文件已经被压缩,OK
但是不知道大家发现上述的代码有个不足没?
如果文件改变了,我们每次都得自己手动在node环境下,输入gulp + 相应任务名执行操作。
说好的自动化呢?
所以我们得修改上述代码,让其自动化--一旦script文件下的js文件变动,就自己自行压缩。
利用gulp.watch方法,可监听文件,来弥补这一不足,如:在这里监听script下的js文件。(一旦变化,就自动压缩)
如下:
修改gulpfile.js,内容如下
//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模块,用于压缩JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//'firstScript'为我们自定义的任务名,匿名函数为'firstScript'具体任务
gulp.task('minjs', function(){
// 'script/*.js'是即将压缩的js文件
gulp.src('script/*.js')
//uglify()是调用的压缩方法,去压缩js
.pipe(uglify())
//gulp.dest是将压缩后的文件另存为哪的方法,如存到newScript文件夹中
.pipe(gulp.dest('new'));
});
//新增一个auto任务
gulp.task('auto', function(){
//利用watch方法监听script下的js文件,如果变动,则执行firstScript任务
//gulp.watch('script/*.js', ['minjs']);
//event为gulp.watch回调函数中的event
gulp.watch('script/*.js', function(event){
var paths = watchPath(event, 'script', 'new');
gulp.src(paths.srcPath)
.pipe(uglify())
//paths.distDir为目录文件,如果换成paths.distPath,会报错:file already exists
.pipe(gulp.dest(paths.distDir));
});
});
//将需要默认执行的任务名,添加到default任务中,如,添加上面的‘auto’任务
gulp.task('default',['auto']);
执行以下代码
- 文件会自动被压缩,OK,小伙伴们去试一试吧
Gulp压缩JavaScript代码的更多相关文章
- 使用Google Closure Compiler高级压缩Javascript代码
背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyjs/ ...
- 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方
介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...
- Grunt 使用(二)uglify插件压缩javascript代码
本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...
- 【Java】通过移除空行和注释来压缩 JavaScript 代码
1. [代码]JavaScriptCompressor.java/** * This file is part of the Echo Web Application Framework (herei ...
- JavaScriptMinifier C#压缩Javascript
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...
- 格式化JavaScript代码
javascript代码格式化工具 网上下载的js代码经常遇到代码已被压缩(注释.换行.缩进.空格.TAB等都被删除了),如果拿来学习.研究的话必定看到头晕.有些编辑器的“格 式化代码”功能可以解决这 ...
- 使用 gulp 压缩 JS
使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...
- Google Closure Compiler高级压缩混淆Javascript代码
一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
随机推荐
- Ubuntu系统下安装python2.7
第一步:下载python2.7相关版本源码(例如:Python-2.7.4.tgz) 第二步:安装 1) 解压 $tar zxvf Python-2.7.4.tar.tgz 2)进入文件夹: $cd ...
- CentOS 6.X版本升级PHP
#-----------------------------CentOS 6.X版本升级PHP------------------#! /bin/sh #1.关闭selinuxcp -rp /etc/ ...
- Ubuntu12.04卡死的解决方案
刚开始安装的时候用着还行,不过后来发现用了一会总是会出现卡死的状况 后来看了下ubuntu12.04的内核是3.2,后来把内核升级到3.5发现这种情况不会出现了. 查看内核以及升级内核 uname - ...
- 6)Java中String类
1)String对象的初始化 由于String对象特别常用,所以在对String对象进行初始化时,Java提供了一种简化的特殊语法,格式如下: String s = “abc”; ...
- java android 访问DELPHI 的DATASNAP
最新版的DELPHI开发DATASNAP非常简单便捷,DataSnap的REST风格和对JSON的支持,使之成为服务器端开发的神器. 一.DATASNAP服务器中的方法: TServerMethods ...
- Delphi的"Invalid pointer operation"异常的解决办法
今天用Delphi编写了个dll,用到了TStringList来传递多参数,如下: [delphi] view plaincopy 01.function DBM_SetParam(procName: ...
- Javascript 插件统一的实现步骤
步骤: // 1. 定义立即调用的函数 +function($){ "use strict"; //使用严格模式ES5支持 //后续步骤 // 2. xx 插件类及原型方法的定义 ...
- 容易被忽略的事----sql语句中select语句的执行顺序
关于Sql中Select语句的执行顺序,一直很少注意这个问题,对于关键字的使用也很随意,至于效率问题,因为表中的数据量都不是很大,所以也不是很在意. 今天在一次面试的时候自己见到了,感觉没一点的印象, ...
- DMA直接内存存取20160525
说一下工作中接触到的DMA1)在实现DMA传输时,是由DMA控制器直接掌管总线,因此,存在着一个总线控制权转移问题.即DMA传输前,CPU要把 总线控制权交给DMA控制器,而在结束DMA传输后,DMA ...
- 19.python的编码问题
在正式说明之前,先给大家一个参考资料:戳这里 文章的内容参考了这篇资料,并加以总结,为了避免我总结的不够完善,或者说出现什么错误的地方,有疑问的地方大家可以看看上面那篇文章. 以下说明是针对于pyth ...