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 ...
随机推荐
- c++强制类型转换(static_cast,const_cast,dynamic_cast,reinterpret_cast)
static_cast <typeid>(exdlvssion) static_cast 很像 C 语言中的旧式类型转换.它能进行基础类型之间的转换,也能将带有可被单参调用的构造函数或用户 ...
- 删除linux系统服务
#删除服务的命令,[ServiceName]需要替换为实际的服务名称 sudo update-rc.d [ServiceName] remove 有时候安装sysv-rc-conf进行服务控制,但是在 ...
- Laravel 5 基础(十一)- 表单验证
在建立一个文章的时候,如果你什么都不输入直接提交,ok,你获得了一个空的文章,没有任何错误提示,这是不对的.在命令行下运行 php artisan 可以看到一个选项 make:request,新建一个 ...
- C#连接mysql实例
using System; using System.Configuration; using MySql.Data.MySqlClient; /// <summary> /// Test ...
- python杂记-1(os模块)
os模块说明:python os模块包含普遍的操作系统功能 os.access(path, mode) # 检验权限模式 os.chdir(path) # 改变当前工作目录os.chflags(pat ...
- 开始认真学计算机网络----computer network学习笔记(一)
什么是计算机网络,就是连一堆计算机,计算机不单单指pc,还包括打印机啦,手机啦巴拉巴拉一堆 为什么要连,share data共享数据 数据? 文档,图片,视频,巴拉巴拉 网络有什么类型? LAN--- ...
- bat文件编写(无线承载网络设置)
就弄个例子,自己看执行效果,然后模仿写就行. 1)获取当前时间: @echo off set YEAR=%date:~0,4% set MONTH=%date:~5,2% set DAY=%date: ...
- Android之通过向WebService服务器发送XML数据获取相关服务
原理图如下: 即客户端向WebService服务器通过HTTP协议发送XML数据(内部包含调用的一些方法和相关参数数据),然后WebService服务器给客户端返回一定的XML格式的数据 ...
- 怎么解决/bin/sh: arm-linux-gcc: not found make
1.arm-linux-gcc 环境变量没有设,所以找不到这个编译器 在/etc/profile里添加arm-linux-gcc的存放路径 sudo -s gedit /etc/profile 编 ...
- iOS七大手势之(平移、捏合、轻扫、屏幕边缘轻扫)手势识别器方法
使用手势很简单,分为两步: 创建手势实例.当创建手势时,指定一个回调方法,当手势开始,改变.或结束时,回调方法被调用. 添加到需要识别的View中.每个手势只对应一个View,当屏幕触摸在View的边 ...