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 ...
随机推荐
- poj3468A Simple Problem with Integers(线段树的区域更新)
http://poj.org/problem?id=3468 真心觉得这题坑死我了,一直错,怎么改也没戏,最后tjj把q[rt].lz改成了long long 就对了,真心坑啊. 线段树的区域更新. ...
- Django 连接redis方法
1. 按照redis模块 # 在cmd中 pip3 install redis 2. 测试代码 插入单挑数据 import redis conn = redis.Redis(host='10.0.0. ...
- webdriver鼠标上下滑动
有时候我们需要对窗口显示的页面上下滑动,以显示当前正在处理的位置,这就需要用到webdriver模拟鼠标上下滑动 package test20161201; import org.openqa.sel ...
- 【Rewrite重定向】Nginx使用rewrite重新定向
使用nginx做重新定向. nginx参考网址:http://blog.sina.com.cn/s/blog_97688f8e0100zws5.html 语法规则: location [=|~|~*| ...
- SQL Server 2008 R2 超详细安装图文教程
一.下载SQL Server 2008 R2安装文件 ed2k://|file|cn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso ...
- 对于session,request,cookie的理解
session和request的生命周期 首先是session,比如我们在实现一个购物车功能时,在某一页面(这里称为页面A)选择了一些购物的商品,添加到购物车.那么当我们选择完成后点击我的购物车时会跳 ...
- input hidden的作用
网上辣么多blabla的,我就总结一下 1 什么是hidden hidden 是input type的一个值,叫隐藏域,官方解释:“Hidden 对象代表一个 HTML 表单中的某个隐藏输入域. 这种 ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- ng-深度学习-课程笔记-0: 概述
课程概述 这是一个专项课程(Specialization),包含5个独立的课程,学习这门课程后做了相关的笔记记录. (1) 神经网络和深度学习 (2) 改善深层神经网络:超参数调试,正则化,优化 ( ...
- linux 图形界面的安装
本文内容主要摘自:http://blog.csdn.net/hotday_kevin/article/details/8310054 文中图形的安装和卸载都给了两种方式,貌似是因为都是版本的问题而不同 ...