因为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代码的更多相关文章

  1. 使用Google Closure Compiler高级压缩Javascript代码

    背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyjs/ ...

  2. 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方

    介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...

  3. Grunt 使用(二)uglify插件压缩javascript代码

    本文在配置grunt基本环境的基础下,讲解如何使用grunt-contrib-uglify进行javascript压缩 本文只介绍了grunt-contrib-uglify插件的一种压缩方式适用于大部 ...

  4. 【Java】通过移除空行和注释来压缩 JavaScript 代码

    1. [代码]JavaScriptCompressor.java/** * This file is part of the Echo Web Application Framework (herei ...

  5. JavaScriptMinifier C#压缩Javascript

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...

  6. 格式化JavaScript代码

    javascript代码格式化工具 网上下载的js代码经常遇到代码已被压缩(注释.换行.缩进.空格.TAB等都被删除了),如果拿来学习.研究的话必定看到头晕.有些编辑器的“格 式化代码”功能可以解决这 ...

  7. 使用 gulp 压缩 JS

    使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...

  8. Google Closure Compiler高级压缩混淆Javascript代码

    一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...

  9. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

随机推荐

  1. OpenStack实战(一)

    OpenStack作为当前发展势头迅猛的云计算开源项目,去年进行了一些了解,现在有空回来进行一些补充记录,当时实战的版本是那会最新版本,当然现在已经更新了好几版了,不过还是那句话“这些丝毫不影响,了解 ...

  2. Spark自定义分区(Partitioner)

    我们都知道Spark内部提供了HashPartitioner和RangePartitioner两种分区策略,这两种分区策略在很多情况下都适合我们的场景.但是有些情况下,Spark内部不能符合咱们的需求 ...

  3. LotusPhp中配置文件组件LtConfig详解

    LotusPhp中配置文件组件LtConfig是约定的一个重要组成部分,适用于多个场景,多数的LotusPhp组件如数据库,缓存,RBAC,表单验证等都需要用到配置组件,LtConfig配置组件也是L ...

  4. map与set的遍历

    map有四种方式: 1.直接遍历 keySet 2.使用Iterator //注意next放回的对象是map.Entry<K,V>,而使用的iterator是通过entrySet返回的一个 ...

  5. 14.python中的集合

    什么是集合?正如其字面的意思,一堆东西集中合并到一起.乍一听貌似和容器没什么差别,嗯,好吧,集合也算是一种容器. 在学习这个容器有什么不同之前,先看看集合是如何创建的: a = set() #可变集合 ...

  6. MVC中用ajax提交json对象数组

    应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...

  7. WPF工作笔记:本地化支持、主进程通知、两种最常用异步编程方式

    1.本地化支持 (1)重写控件默认的依赖属性LanguageProperty FrameworkElement.LanguageProperty.OverrideMetadata( typeof(Fr ...

  8. 帮朋友 解决一道 LeetCode QJ上问题

    引言 对于刷题,自己是没能力的. 最经一个朋友同事考我一道数组题 . 也许能当面试分享吧. 娱乐娱乐. 事情的开始是这样的. 前言 题目 截图 大概意思 是 在一个 数组中,找出其中两个不重复出现的元 ...

  9. SQLserver使用映射表进行数据相关操作

    基本需求: 老数据有老数据的顺序编码规则,新数据有新数据的顺序编码规则,但是老数据的编码还是要更新相应的东西,新数据也得实时更新,在新数据中已经用新编码规则对老数据对进行编码,在上报表中既要新增新数据 ...

  10. Cygwin下软件安装 - apt-cyg

    安装了cygwin,但不能像centos上装yum,装东西很不方便.找了下可以用apt-cyg来安装软件. 1.下载apt-cyg $ wget raw.github.com/transcode-op ...