标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

本文主要讲如何使用Grunt实现less文件压缩。<h2>一 说明</h2>less是非常常用的样式框架之一，Grunt也提供了可以编译和打包less样式文件的插件：grunt-contrib-less。实现原理分析：分析该插件源码，可以发现该插件实际只做了对样式文件的各种处理，真正进行编译less文件到css文件，实际还是调用的less库的less.render方法实现的。如下是grunt-contrib-less库源码：<img src="/ueditor/php/upload/image/20200107/1578394587326625.png" alt="" style="border: 0px; max-width: 800px; height: auto;"/><h2>二 安装</h2><pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">npm&nbsp;install&nbsp;grunt-contrib-less&nbsp;--save-dev</pre><h2>三 加载任务</h2><pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">grunt.loadNpmTasks(&#39;grunt-contrib-less&#39;);</pre><h2>四 配置</h2>该插件配置吧比较简单，下边只列出作者用到的几个常用属性：<h3>4.1 files</h3>设置要处理的less文件地址和输出的css文件地址。<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">1&nbsp;files:&nbsp;{2&nbsp;&nbsp;&nbsp;&nbsp;&#39;dist/build.css&#39;:&nbsp;&#39;theme/build.less&#39;3&nbsp;}</pre><h3>4.2 options</h3>其它各种配置都在options中，具体属性如下：paths：　　类型：&nbsp;String&nbsp;Array&nbsp;Function<code> </code>　　默认值: 根目录.　　意义：定义@import加载文件的路径。默认值是文件的当前路径。 如果指定一个函数的源文件路径将是第一个参数。您可以返回到使用字符串或路径的数组。rootpath：　　类型：String　　默认值：“”　　意义：所有文件都是基于这个路径compress：　　类型：bool　　默认值：false　　意义：压缩编译之后的css文件，即删除css文件中的空行和空格cleancss：　　类型： bool　　默认值： false　　意义： 使用<a href="https://www.npmjs.org/package/clean-css" target="_blank" style="color: rgb(51, 102, 153); text-decoration-line: none; background: transparent;">clean-css</a>来压缩css文件cleancssOptions：　　类型： Object　　默认值： none　　意义：如果设置cleancss为true的话，此项才起效果，配置cleancss的选项ieCompat：　　类型：bool　　默认值：true　　意义：编译之后的css文件适应于ie8optimization：　　类型： Integer　　默认值：null　　意义：设置优化等级，数字越小，在树中创建的节点越少。会影响到调试。strictImports：　　类型：bool　　默认值：false　　意义：如果设置为true，less将会以标准的模式来加载@import引用的文件strictMath：　　类型：bool　　默认值：false　　意义：如果设置为true，表达式需要用括号括起来strictUnits：　　类型：bool　　默认值：false　　意义：如果设置为true，less将会验证单位是否合法syncImport：　　类型：bool　　默认值：false　　意义：异步加载通过@import引用的文件dumpLineNumbers：　　类型：string(comments, mediaquery,all)　　默认值：false　　意义：relativeUrls：　　类型：bool　　默认值：false　　意义：重写url为相对urlcustomFunctions：　　类型： Object　　默认值: none　　意义：自定义函数，一般是全局功能的。report：　　类型： string (&#39;min&#39;, &#39;gzip&#39;)　　默认值：min　　意义：何种方式来压缩文件，gzip更消耗时间sourceMap：　　类型：bool　　默认值：false　　意义：是否使用文件映射sourceMapFilename：　　类型：string　　默认值：none　　意义：编写源与给定的文件名映射到一个单独的文件。sourceMapUrl：　　类型：string　　默认值：none　　意义：重写css文件中的源映射。sourceMapBasepath：　　类型：string　　默认值：none　　意义：设置在源映射中的less文件路径的基本路径。sourceMapRootpath：　　类型：string　　默认值：none　　意义：在map文件中的less文件根目录outputSourceFiles：　　类型：bool　　默认值：false　　意义：将less文件放到Map文件中，替换引用。modifyVars：　　类型： Object　　默认值： none　　意义：重写全局变量banner：　　类型：string　　默认值： none　　意义：标记，编译之后文件顶部标记<h2>五 实战</h2>下边是一个实例项目。<h3>5.1 整体项目目录：</h3><img src="/ueditor/php/upload/image/20200107/1578394588205712.png" alt="" style="border: 0px; max-width: 800px; height: auto;"/><h3>5.2 gruntfile.js文件中配置：</h3> <pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">module.exports&nbsp;=&nbsp;function(grunt)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;grunt.initConfig({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;清理空文件夹
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clean:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foo1:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;[&#39;dist/*&#39;]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;less:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;css:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;compress:&nbsp;true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strictMath:&nbsp;true
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;dist/build.css&#39;:&nbsp;&#39;theme/build.less&#39;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;grunt.loadNpmTasks(&#39;grunt-contrib-less&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;grunt.loadNpmTasks(&#39;grunt-contrib-clean&#39;);

&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;默认被执行的任务列表。
&nbsp;&nbsp;&nbsp;&nbsp;grunt.registerTask(&#39;default&#39;,&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;clean&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;less&#39;
&nbsp;&nbsp;&nbsp;&nbsp;]);

};</pre> <h3>5.3 入口文件build.less代码很简单：</h3><pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">@import&nbsp;&quot;a.less&quot;;</pre><h3>5.4 核心less文件a.less代码如下：</h3> <pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">@width:&nbsp;80px;
@color:&nbsp;&#39;red&#39;;

.a-title&nbsp;{
&nbsp;&nbsp;color:&nbsp;@color;
&nbsp;&nbsp;width:&nbsp;@width;
&nbsp;&nbsp;height:&nbsp;100px;
&nbsp;&nbsp;background-color:&nbsp;blueviolet;
}</pre> <h3>5.5 执行grunt命令后输出文件build.css如下（下边是格式化后的）：</h3><pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important;">.a-title&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;&#39;red&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;80px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;blueviolet
&nbsp;}</pre><h2>六 实战代码下载地址</h2>上边实战源码获取地址：https://gitee.com/bangbangwa/grunt/blob/master/grunt-contrib-less-test.rar<h2>参考资料&amp;内容来源</h2>Grunt官网：https://www.npmjs.com/package/grunt-contrib-less