nodejs+gulpjs压缩js代码
1.安装node.js
下载地址:nodejs.org 或者 nodejs.cn
2.安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安装
npm install gulp -g
3.安装好了以后我们建立一个test作为项目主路径,然后在cmd里cd到这个路径用npm对gulp进行依赖安装
npm install gulp --save-dev
安装完成后test目录如下:
4.插件安装-安装gulp需要用到的插件
要使用gulp就必须使用gulp的插件,以下是我在网上搜索到的gulp插件:
sass的编译(gulp-ruby-sass)
自动添加css前缀(gulp-autoprefixer)
压缩css(gulp-minify-css)
js代码校验(gulp-jshint)
合并js文件(gulp-concat)
压缩js代码(gulp-uglify)
压缩图片(gulp-imagemin)
自动刷新页面(gulp-livereload)
图片缓存,只有图片替换了才压缩(gulp-cache)
更改提醒(gulp-notify)
清除文件(del)
需要哪个装哪个就行。
依然使用npm安装(在test文件夹下启动git或者cmd):
npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache gulp-less del --save-dev
5.建立一个存放待压缩js的文件夹及一个放置压缩后js的文件夹(我建立的in,out)
6.gulpfile.js内容如下,可自己调整
/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
//var concat = require('gulp-concat');
//css压缩
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('des/css/'));
});
//js压缩
gulp.task('js', function () {
gulp.src(['in/*.js'])
.pipe(uglify({
// 混淆变量名
mangle: true,
// 输出时将所有的中文转换为unicode
output: {ascii_only: true}
// 将所有压缩后的代码置于des/js/文件夹
}))
.pipe(gulp.dest('out/'));
});
7.在待压缩的js文件夹,打开命令行输入:
gulp js
即可压缩所有js
完毕,留待日后查看或修正添加
nodejs+gulpjs压缩js代码的更多相关文章
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- grunt压缩js代码
安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...
- YUI Compressor是如何压缩JS代码的?
YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...
- gulp 压缩 js 和 css 代码
我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...
- 压缩和还原压缩的JS代码
压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...
- 如何使用grunt压缩js文件
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- sublime text2之js压缩-Js Minifier
一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M 当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M ...
随机推荐
- POJ:Dungeon Master(三维bfs模板题)
Dungeon Master Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16748 Accepted: 6522 D ...
- hdu1864最大报销额(01背包)
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=187#problem/G 该题要注意的就是每张单子A种类的总和不能大与600,同 ...
- JS参差不齐的数组
<html><head> <title>参差不齐的数组</title> <meta charset="utf-8"> & ...
- cocos代码研究(7)即时动作子类学习笔记
理论部分 即时动作是会立即被执行的动作.他们没有持续时间动作(ActionInterval)的持续时间属性.继承自 FiniteTimeAction.被 CallFunc, FlipX, FlipY, ...
- C# 实现屏幕截屏
//屏幕宽 int iWidth = Screen.PrimaryScreen.Bounds.Width; //屏幕高 int iHe ...
- wprintf或_tprintf不显示中文和乱码问题
1.由于中文问题,宽字节编译时会遇到一些不显示或显示乱码问题 如下列代码: 分别是WIN API写入和读取文件,测试_tprintf就会不显示 #include "stdafx.h&quo ...
- uva11107 后缀数组
题意给了n个串 然后计算 这些串中的子串在大于1/2的串中出现 求出这个串的最长长度. 将这些串用一个每出现的不同的字符拼起来 ,然后二分找lcp #include <iostream> ...
- zoj3814
这题说的是给了一个数在longlong范围内 然后求出小于这个数的最大的回文,枚举每位减去1后 , 他后面的位置上全部都置为9,然后在枚举每个前半部分,然后贪心取得这个数的最大值,贪心的时候写错了,错 ...
- 【Redis学习之二】Redis:redis.conf 配置详解
参数说明redis.conf 配置项说明如下:1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no2. 当Redis以守护进程方式运行 ...
- pycharm 设置文件编码的位置:Editor-->File Encodings
打开设置-->Editor-->File Encodings