如何利用node进行js css合并压缩

html-css029

如何利用node进行js css合并压缩,第1张

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs,安装nodejs。

完成nodejs安装之后,需要使用npm安装gulp。

先安装全局gulp

npm install -g gulp然后在项目根目录下安装本地gulp。

此时项目根目录下会多出下面这个文件夹 node_modules

好的,现在gulp已经安装完成了,但是gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能,先安装相应的插件:

1.css压缩 gulp-minify-css

2.js压缩 gulp-uglify

3.js合并 gulp-concat

由于压缩之前需要对js代码进行代码检测,压缩完成之后需要加上min的后缀,我们还需要安装另外两个插件:

安装:cnpm install uglify-js –gcss

参数用法:

uglifyjsXX.js -o xx.min.js压缩

uglifyjsXX.js -m -o xx.min.js 混淆性压缩

uglifyjsxx.min.js –b –o xx.js 美化(反压缩) 文件

安装:

cnpm install minifier -g

用法:

minifier 是一个 nodejs 下的用于压缩 js 和 css 文件的插件。

minify index.js

则在当前文件夹下会生成一个index.min.js 的压缩的文件。css文件采用相同的命令进行压缩。

安装Less2Css时,需要先安装Package Control。

查看是否安装Package Control :可以点击菜单 Prefrences ,看下是否有Package Control子菜单,或者快捷键(Ctrl+Shift+P)输入Package Control。

如果没有找到,则需要安装.

安装Package Control步骤:1. https://github.com/wbond/sublime_package_control 下载该文件;2.Prefrences >Browser Packages会打开Sublime的安装目录,点击上一层找到Installed Packages文件夹,打开该文件夹,将步骤1中下载的文件解压到改文件夹内。3.重启Sublime。

完成Package Control安装后,可以进行下一步,安装Less2Css

步骤:1.快捷键 Ctrl+Shift+P(菜单 – Tools – Command Paletter),输入 install 选中Install Package并回车,输入或选择Less2Css(注意左下角的小文字变化,会提示安装成功)。

2. https://github.com/duncansmart/less.js-windows 下载该文件并解压到本地目录(eg:D:\less.js-windows-master);点击计算机 右击 属性,选择高级系统设置,编辑Path ,将解压目录,添加到PATH中。