gulp教程之gulp-less 妖狐艹你老母 2022-09-25 04:16 226阅读 0赞 ### 简介: ### 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。 ### 1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ### 1.1、gulp基本使用还未掌握?请参看: [gulp详细入门教程][gulp] 1.2、本示例目录结构如下: ![gulp-less-1.png][] ### 2、本地安装gulp-less ### 2.1、github:[https://github.com/plus3network/gulp-less][https_github.com_plus3network_gulp-less] 2.3、安装:命令提示符执行 `cnpm install gulp-less --save-dev` 2.4、注意:没有安装cnpm请使用 `npm install gulp-less --save-dev` [什么是cnpm,如何安装?][cnpm] 2.5、说明:`--save-dev` 保存配置信息至 package.json 的 devDependencies 节点。[为什么要保存至package.json?][package.json] ![gulp-less-2.png][] ### 3、配置gulpfile.js ### 3.1、基本使用 JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1068.18px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/index.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> 3.2、编译多个less文件 JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1068.18px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">[</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/index.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/detail.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">]</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//多个文件以数组形式传入</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//将会在src/css下生成index.css以及detail.css</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> 3.3、匹配符“!”,“\*”,“\*\*”,“\{\}” JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 9 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 10 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1060.91px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//编译src目录下的所有less文件</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//除了reset.less和test.less(**匹配src/less的0个或多个子文件夹)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">[</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'!src/less/**/{reset,test}.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">]</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> 3.4、调用多模块(编译less后压缩css) JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 9 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 10 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 11 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1060.91px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">cssmin</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-minify-css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/index.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">cssmin</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> 3.5、当less有各种引入关系时,编译后不容易找到对应less文件,所以需要生成sourcemap文件,方便修改 JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 9 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 10 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 11 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 12 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1060.91px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">sourcemaps</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-sourcemaps'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/**/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">sourcemaps</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">init</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">sourcemaps</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">write</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> ### 4、执行任务 ### 4.1、命令提示符执行:gulp testLess ![gulp-less-4.png][] ### 5、监听事件(自动编译less) ### 5.1、若每修改一次less,就要手动执行任务,显然是不合理的,所以当有less文件发生改变时使其自动编译 JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 9 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 10 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 11 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 12 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1060.91px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">[</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'!src/less/extend/{reset,test}.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">]</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testWatch'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">watch</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/**/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">[</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">]</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//当所有less文件发生改变时,调用testLess任务</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> 5.2、启动监听事件:命令提示符执行 gulp testWatch 5.3、注意:该命令提示符执行需处于打开状态,关闭后监听事件结束(Ctrl + C 或右上) ![gulp-less-3.png][] ### 6、异常处理 ### 6.1、当编译less时出现语法错误或者其他异常,会终止watch事件,通常需要查看命令提示符窗口才能知道,这并不是我们所希望的,所以我们需要处理出现异常并不终止watch事件(gulp-plumber),并提示我们出现了错误(gulp-notify)。 JavaScript <table style="border-spacing:0px; border-collapse:collapse; padding:0px; margin:0px; border:none; width:auto; background:0px 0px"> <tbody> <tr style="padding:0px; border:none; vertical-align:top; margin:0px; background:0px 0px"> <td style="margin:0px; padding:5px 5px 5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; border-style:none solid none none; border-right-width:1px; border-right-color:rgb(239,239,239); vertical-align:top; color:rgb(169,169,169); background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:nowrap; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 1 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 2 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 3 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 4 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 5 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 6 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 7 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 8 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 9 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 10 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 11 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 12 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 13 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 14 </div> <div style="font-family:inherit; padding:0px 0px 0px 5px; margin:0px; border:none; text-align:center; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> 15 </div> </div> </td> <td style="margin:0px; padding:5px 0px; font-family:Consolas,ConsolasRegular,'Courier New',monospace!important; width:1060.91px; border:none; vertical-align:top; background:0px 0px"> <div style="padding:0px; margin:0px; border:none; white-space:pre; overflow:visible; font-size:14px!important; line-height:18px!important; background:0px 0px"> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">var</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(98,189,75)">//当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">notify</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-notify'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">plumber</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">=</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">require</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'gulp-plumber'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">src</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/less/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">plumber</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">errorHandler</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)">:</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">notify</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">onError</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'Error:<span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:red"><%=</span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">error</span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">message</span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span><span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:red">%></span>'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">less</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">pipe</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">dest</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/css'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">task</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testWatch'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(21,143,239)">function</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">{ </span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"> </span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,45,122)">gulp</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">.</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,78,208)">watch</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">(</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'src/**/*.less'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">,</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(0,111,224)"></span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">[</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(213,200,72)">'testLess'</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">]</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> <div style="font-family:inherit; padding:0px 5px 0px 10px; margin:0px; border:none; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; background:0px 0px"> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">}</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">)</span> <span style="font-family:inherit; font-size:undefined; line-height:inherit; font-weight:inherit; height:inherit; color:rgb(51,51,51)">;</span> </div> </div> </td> </tr> </tbody> </table> ### 7、结束语 ### 7.1、本文有任何错误,或有任何疑问,欢迎留言说明 [gulp]: http://www.ydcss.com/archives/18 [gulp-less-1.png]: http://static.ydcss.com/uploads/2015/02/gulp-less-1.png [https_github.com_plus3network_gulp-less]: https://github.com/plus3network/gulp-less [cnpm]: http://www.ydcss.com/archives/18#lesson4 [package.json]: http://www.ydcss.com/archives/18#why [gulp-less-2.png]: http://static.ydcss.com/uploads/2015/02/gulp-less-2.png [gulp-less-4.png]: http://static.ydcss.com/uploads/2015/02/gulp-less-4.png [gulp-less-3.png]: http://static.ydcss.com/uploads/2015/02/gulp-less-3.png
还没有评论,来说两句吧...