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 ...
随机推荐
- 阿里云安装docker 指定版本
sh docker-install.sh 1.12.6 #ubuntu16.4 测试通过 #!/bin/sh set -e # # This script is meant for quick &am ...
- [LeetCode] 301. Remove Invalid Parentheses_Hard tag:BFS
Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...
- TempData["a"]多个Action方法之前共享数据
ViewData["a"]只可以在自己视图的页面里被访问,但TempData["a"]可以多个Action方法之前共享数据,比如在 @{Html.RenderA ...
- dialog提交表单
<div id="dialog" title="添加客户"> <!--表单提交--> <form id="dialogF ...
- JavaScript循环练习2
折纸:折多少次和珠穆朗玛峰一样高1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米 var hou = 0.0001; var cishu = 0; for(var i= ...
- c语言中strcpy与strlen函数对字符串最后的'\0'的处理
对于strcpy来说,它会把字符串最后的‘\0’一起拷贝 对于strlen来说,它计算字符串长度的时候不会把最后的‘\0’计算进去
- 奋斗史-IT女生是怎样炼成的
IT女生的奋斗史 终于来到了毕业季,感觉有点伤感! 记得11年来到大学的时候,还是那么懵懂,什么都不懂,几乎连电脑的基本操作都不会!自己小时候虽然家里穷,但是从小就觉得“软件”是个很神奇的东西,很了不 ...
- linux基础命令---tr
tr 删除或者更改文件中的字符串,这个指令一般需要两个字符集. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 ...
- keepalived+lvs高可用集群
LVS+Keepalived 介绍 LVS LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国 ...
- Linux 环境 HTTP 服务器
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <netinet/in ...