webpack之前的各种工具

babel-cli  browser-sync  browserify   
less less-plugin-clean-css   uglify-js

进入项目目录： cd WebstormProjects/beforeWebpack/------Lesson1: beforeWebpack------webpack主要应用于SPA项目,运行在node的环境下webpack工作：.压缩图片成base64 .压缩多个css文件为一个 .把less,sass压缩生成css------Lesson2: babel(javascript编译器 可把高版本js文件转换为低版本)------安装babel: npm install babel-cli -g在www文件夹中： npm init npm install babel-cli --save-dev   //--save-dev指示开发时依赖的东西，--save指示发布后还依赖的东西 npm install ---后续根据package包安装依赖时使用此命令安装es2015标准： npm install babel-preset-es2015 -g npm install babel-preset-es2015 --save-dev新建babel的配置文件 .babelrc ,内容: {   "presets":[ "es2015" ],   "plugins":[] } babel es6.js用babel命令把es6的js文件编译成es5的： babel es6.js --out-file es5.js babel es6.js -o es5.js用babel命令把src中的文件编译到build文件夹： babel src -d build用babel自动监测变化并编译: babel --watch src -d build ctrl + c 退出自动监测在package.json中的scripts中定义命令build: "scripts": {    "build": "babel --watch js -d build"  }用npm执行build： npm run build------Lesson3:browser-sync(浏览器同步测试工具 可监听文件改变及时响应到页面)------安装browser-sync: npm install browser-sync -g npm install browser-sync --save-devbrowser-sync帮助: browser-sync start --help启动: browser-sync start --server启动并自动监听lib文件夹下的js文件： browser-sync start --server -f lib/*.js在package.json中批量定义命令  babel自动监听并转换js版本  browser-sync自动监听转换后的js并响应到页面 ： "scripts": {    "build": "npm run build:watch && npm run build:server",    "build:watch": "babel --watch lib -d build",    "build:server": "browser-sync start --server -f lib/*.js"  }批量执行命令：npm run build------Lesson4:browserify(以模块化的方式来组织js代码，最后打包为一个文件)------node规范：  common.js 允许把外部js文件引入主文件 同步加载 重点  amd 异步加载 先加载再处理  cmd 异步加载 需要时加载安装browserify:  npm install browserify -g  npm install browserify --save-dev创建js文件commonjs/add.js: module.exports = {     add:function (a,b) { console.log(a + b); } };创建js文件commonjs/reduce.js: module.exports = function (a,b) {     console.log(a - b); };创建入口js文件commonjs/index.js: var add = require("./add").add; add(1, 2); var reduce = require("./reduce"); reduce(20, 10);打包上述三个模块化的js文件到一个文件： browserify commonjs/index.js > index1.js执行index1.js查看输出： node index1.js 输出：3      10------Lesson5:less(css预处理语言，增强了css)------安装less: npm install less -g npm install less --save-dev创建文件css/basic.less: @masterColor : #ff6699; @masterColor-border : lighten(@masterColor,20%); @padding-sm : 10px; @ns: ~"wos";创建文件css/layout.less: body{   background-color:@masterColor;   header{     width:100%;     height:200px;     border:1px solid @masterColor-border;     li{       float:left;       padding:@padding-sm     }     @{ns}-color{       color:@masterColor     }   } }创建入口文件css/index.less: @import "./basic.less";    // ./表示当前目录 @import "./layout";打包上述模块化的less文件到一个css文件： lessc css/index.less  index2.css------Lesson6:js和css压缩------安装less压缩插件： npm install less less-plugin-clean-css -g npm install less less-plugin-clean-css --save-dev用less压缩css： lessc  css/index.less  index3.css  --clean-css="advanced"安装js压缩混淆工具uglifyjs： npm install uglify-js -g npm install uglify-js --save-dev用uglifyjs压缩js: 先把js打包到一个js文件：   browserify ./commonjs/index.js > index6.js 再用ugligyjs压缩:   uglifyjs index6.js -o index6.min.js用uglifyjs混淆并压缩js:   uglifyjs index6.js -m -o index7.min.js------Lession7:图片处理------1.js 打包、压缩、混淆2.css 打包、压缩3.img 压缩 ad banner spa logo icon=font base64 svg安装图片压缩工具： npm install node-smushit -g压缩目录下所有图片； smushitphotoshop中，保存图片为Png： 压缩：无／快      最小／慢  Y（尺寸较小） 交错：无       Y      交错        （比无尺寸大） photoshop中，保存图片为Jpg: 品质：8 （通常选8） 图像-图像大小-分辨率：72（要设为72dpi）压缩img下的图片（通常用于后台压缩几十兆的图片）： smushit ./img压缩图片的一个收费工具 tinify: npm install tinify -g npm install tinify --save安装转换图片为base64的base64-css: npm install base64-css用base64-css把css中引用的图片变成base64码： node node_modules/base64-css/bin/cli.js -f index2.css除了base64，还可以用svg图片（矢量图）