因为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. c++强制类型转换(static_cast,const_cast,dynamic_cast,reinterpret_cast)

    static_cast <typeid>(exdlvssion) static_cast 很像 C 语言中的旧式类型转换.它能进行基础类型之间的转换,也能将带有可被单参调用的构造函数或用户 ...

  2. 删除linux系统服务

    #删除服务的命令,[ServiceName]需要替换为实际的服务名称 sudo update-rc.d [ServiceName] remove 有时候安装sysv-rc-conf进行服务控制,但是在 ...

  3. Laravel 5 基础(十一)- 表单验证

    在建立一个文章的时候,如果你什么都不输入直接提交,ok,你获得了一个空的文章,没有任何错误提示,这是不对的.在命令行下运行 php artisan 可以看到一个选项 make:request,新建一个 ...

  4. C#连接mysql实例

    using System; using System.Configuration; using MySql.Data.MySqlClient; /// <summary> /// Test ...

  5. python杂记-1(os模块)

    os模块说明:python os模块包含普遍的操作系统功能 os.access(path, mode) # 检验权限模式 os.chdir(path) # 改变当前工作目录os.chflags(pat ...

  6. 开始认真学计算机网络----computer network学习笔记(一)

    什么是计算机网络,就是连一堆计算机,计算机不单单指pc,还包括打印机啦,手机啦巴拉巴拉一堆 为什么要连,share data共享数据 数据? 文档,图片,视频,巴拉巴拉 网络有什么类型? LAN--- ...

  7. bat文件编写(无线承载网络设置)

    就弄个例子,自己看执行效果,然后模仿写就行. 1)获取当前时间: @echo off set YEAR=%date:~0,4% set MONTH=%date:~5,2% set DAY=%date: ...

  8. Android之通过向WebService服务器发送XML数据获取相关服务

    原理图如下:        即客户端向WebService服务器通过HTTP协议发送XML数据(内部包含调用的一些方法和相关参数数据),然后WebService服务器给客户端返回一定的XML格式的数据 ...

  9. 怎么解决/bin/sh: arm-linux-gcc: not found make

      1.arm-linux-gcc 环境变量没有设,所以找不到这个编译器 在/etc/profile里添加arm-linux-gcc的存放路径 sudo -s gedit /etc/profile 编 ...

  10. iOS七大手势之(平移、捏合、轻扫、屏幕边缘轻扫)手势识别器方法

    使用手势很简单,分为两步: 创建手势实例.当创建手势时,指定一个回调方法,当手势开始,改变.或结束时,回调方法被调用. 添加到需要识别的View中.每个手势只对应一个View,当屏幕触摸在View的边 ...