js压缩

一、下载并安装Node.js C:\Users\Administrator>node -v v11.0.0 二、安装npm，安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org C:\Users\Administrator>cnpm -v cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.5.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@11.0.0 (C:\Program Files\nodejs\node.exe) npminstall@3.17.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\Administrator\AppData\Roaming\npm win32 x64 10.0.17763

项目实战 1.环境介绍 2.nvm和node.js环境配置 3.npm使用详解 4.gulp介绍和安装 5.gulp创建任务 6.gulp创建处理css文件任务 7.gulp给文件重命名 8.gulp处理JavaScript文件的任务 9.合并多个文件 10.创建压缩图片任务 11.监听文件修改，自动执行任务 12.修改代码实时刷新浏览器 13.项目环境搭建和安装相应包 14.编写gulpfile.js文件 15.sass语法介绍和转换为css 16.导航条实现（1） 17.导航条实现（2） 18.导航条实现（3） 19.导航条吸顶效果 20.轮播图布局和样式 21.JS面向对象和实现一次轮播 22.实现自动轮播 23.鼠标hover事件控制轮播图暂停和继续 24.切换轮播图的箭头样式及其显示和隐藏事件 25.轮播图上下切换 26.小圆点结构和样式 27.根据轮播图的个数动态修改小圆点结构和样式 28.小圆点点击事件和自动更新当前选中的小圆点 29.实现自动无限循环轮播 30.左右箭头切换实现循环轮播 31.新闻列表tab栏布局完成 32.新闻列表页布局完成 33.加载更多按钮的布局和样式 34.侧边栏-标题和广告位布局完成 35.侧边栏-关注第三方平台盒子布局和样式 36.侧边栏-热门推荐完成 37.footer布局和样式（1） 38.footer布局和样式（2） 39

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用； 打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽； 转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别 优化：优化项目，提高性能 安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save

一般vue项目完成打包以后需要优化，特别是首次打开加载速度们，webpack打包以后js文件体积很大等方法，可以用这个方法来压缩js文件 安装node.js 安装当前应用 -- uglifyjs 如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下: uglifyjs压缩JS文件 ====== 演示如何使用uglifyjs压缩JS 打开一个用于存放JS文件的文件夹,文件目录如下图: 准备压缩lazyLoad.js做实验, 当前该文件的大小为10KB.我们来进行压缩,看看压缩后的文件大小是多少? 这里给大家介绍一个小技巧, 以方便快速地打开cmd, 并定位到当前目录. 点击"在此处打开命令窗口"后即可以进入到cmd, 你会发现已经切换到当前文件所在的路径了. 此时输入命令对lazyLoad.js文件进行压缩并输出文件名为lazyLoady.min.js的文件: uglifyjs lazyLoad.js -o lazyLoad.min.js 也可以运行如下代码, 测试一下 -m 参数: uglifyjs lazyLoad.js -m -o lazyLoad.min.js 以看到, 压缩后只有3KB, 相比之前的, 文件缩小了3倍多.快去试下吧! 结束语 ====== 对于自己来说, 本文就相当于做笔记. 需要注意的是, uglifyjs只能压缩js文件

"babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-preset-es2015": "^6.24.1", "gulp-babel": "6", 如上代码所示，安装以上版本的babel插件，bable更新很快，当版本不一致会冲突，导致出现 Plugin/Preset files are not allowed to export objects, only functions 。 gulp压缩js代码如下 const uglify = require('gulp-uglify'); //js压缩 const babel = require("gulp-babel"); // gulp打包manager\page\dist\js gulp.task('revJs', ()=> { return gulp.src([filePath + '/page/dist/js/*.js']) .pipe(babel({//编译ES6 presets: ['es2015'] })) .pipe(uglify())//压缩js .pipe(gulp.dest( 'dist/manager/page/dist/js')) }) 来源： https://www.cnblogs.com/uimeigui/p/11797452.html

转载鑫空间、鑫生活的博客：作者： 张鑫旭 HTML5 file API加canvas实现图片前端JS压缩并上传 http://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/ 文章来源: h5的canvas实现图片前端JS压缩

webpack4.x webpack 模块打包工具，分析项目结构，找到js模块及一些浏览器不能运行的语言如ES6/sass等，并将其转换和打包为何时的格式供浏览器使用； 打包：将多个js文件打包成一个文件，减少服务器压力和下载带宽； 转换：把浏览器不能识别的语言转换为js，让浏览器能够正确识别 优化：优化项目，提高性能 安装 // 新建项目文件夹，并进入 mkdir webpack_demo cd webpack_demo //全局安装 npm install -g webpack // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等） npm n init // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用； npm install --save-dev webpack // 查看webpack版本 webpack -v // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli npm install --save