Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成。所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css。另一部分是配置,即传给grunt.initConfig方法的对象。

关于如何安装Grunt,创建Gruntfile.js文件本文不再详述,可以参考《用grunt搭建自动化的web前端开发环境》http://developer.51cto.com/art/201506/479127_1.htm


在终端安装插件
同样使用到了node.js里的包管理器npm,在终端里执行下述命令:

npm install grunt-contrib-less --save-dev
  • 1
  • 1

–save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项。要注意安装的目录应该是你的项目的 根目录,而且本地已经装好了grunt,建立了package.json文件。package.json文件中无法包含全局安装的包,因此Grunt包和 任务插件要求在本地安装Grunt,这样代码才能在不同设备中正常运行。
安装插件部分截图

在Gruntfile.js文件中加载插件

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

 

配置任务

 grunt.initConfig({
       less:{
         compile:{
             file:{
                  'build/css/compiled.css':'src/css/layout.css'
                  }
                 }
            }
    });

终端执行grunt less命令
建议明确指定任务的构建目标,本例中方式为grunt less:compile。此时在build/css文件夹里便生成了compiled.css。less对象还有其他的属性,你还可以添加一个compile_mobile目标,编译移动设备使用的css静态资源。


精确通配模式

通配是一种文件路匹配机制,可以使用文件路径模式来包含或排除文件。下面列出一些有用的通配模式:

['public/*.less',   //匹配public文件夹中拓展名为.less的所有文件
'public/**.*.less',     //还能匹配public文件夹的子文件中的文件,
                        //而且嵌套层级多深
 '!public/vendor/**/*.less  //和第二个作用一样,不过!符号表明
                            // 要从结果中排除匹配的文件
 ]

有一点需要注意的是,不管多少个less文件,编译得到的css都只会打包到一个文件中。

posted on 2016-06-13 10:17  杨杨0708  阅读(353)  评论(0编辑  收藏  举报