最小化 js:grunt-contrib-uglify

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

最小化 js,就是使用一些方法,让 js 文件的尺寸变得更小一些,比如去掉文件里的注释,空白,改变变量的名字等等 ... 使用 grunt-contrib-uglify 这个插件,我们可以完成最小化 js 文件的任务 ...

先去安装一下这个插件 ... 打开命令行 ... npm install ... grunt-contrib-uglify ... grunt 的大部分插件都是用 grunt-contrib 开头 ... 最后一部分是插件的名字,也是在这个插件里面定义的任务的名字 ...

npm install grunt-contrib-uglify --save-dev

完成以后,再到 Gruntfile.js 里面去加载一下这个插件 ...

grunt.loadNpmTasks('grunt-contrib-uglify');

现在,我们就可以使用 uglify 这个任务了 ... 不过想让它真正去做事情,还得配置一下 ... 先在配置对象里面添加一个跟任务同名的属性 ... uglify ... 相关选项可以放在 options 属性里面 ... 我们先添加一个任务的目标 ... 比如叫它 dist ... 在这个目标里面,去描述一下要处理的文件,还有文件输出的位置 ... uglify 可以把多个文件合并到一块儿,再去最小化一下 ... 或者,我们也可以先用 concat 这个任务去把文件合并到一块,然后再把合并以后的文件用 uglify 去处理 ... 这样会更快一些 ...

先用 src 属性,去描述一下要处理的文件的位置 ... 这里我们用一个模板标签 ... 然后是 concat.js.dest ... 意思是使用 concat 的 js 这个目标里面的 dest 这个属性的值 ...

另起一行 ... 再用一个 dest 属性,设置一下最小化之后的文件的位置 ... 放到 dist 下面的 javascripts 这个目录里面,文件的名字是 app.min.js ...

我们再去定义一个任务 ... grunt.registerTask ... 任务的名字可以叫做 build ... 执行这个任务的时候,先去执行 concat ... 再执行 uglify ...

grunt.registerTask('build', ['concat', 'uglify']);

保存 ... 回到命令行 ... 执行一下 build 这个任务 ... grunt build ... 完成以后再回到项目 .. 在 dist 下面的 javascripts 里面,找到处理之后的 app.min.js ...

这个文件,就是合并并且最小化之后的 js 文件 ...

最小化 js:grunt-contrib-uglify《 Grunt 自动化任务 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点