首页 > 代码库 > VS2015 VNext学习系列之五:Grunt篇
VS2015 VNext学习系列之五:Grunt篇
1.概述
Grunt:基于 JS 的task runners。它是一个应用程序,能自动化地开发一些任务。
2.添加less
在“WebAppBowerGrunt”项目根目录下,新建"Lesses"文件夹,在其内,添加site.less文件,其代码为:
@bgcolor: red;body { background-color: @bgcolor;}
3.修改package.json
添加:"grunt-contrib-less": "^0.12.0",并安装:
安装成功后,会出现:
4.修改gruntfile.js
其代码修改后:
// This file in the main entry point for defining grunt tasks and using grunt plugins.// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409module.exports = function (grunt) { grunt.initConfig({ bower: { install: { options: { targetDir: "wwwroot/lib", layout: "byComponent", cleanTargetDir: false } } }, // Add this JSON object: less: { development: { options: { paths: ["Lesses"], }, files: { "wwwroot/css/site.css": "Lesses/site.less" } }, } }); // This command registers the default task which will install bower packages into wwwroot/lib grunt.registerTask("default", ["bower:install"]); // The following line loads the grunt plugins. // This line needs to be at the end of this this file. grunt.loadNpmTasks("grunt-bower-task"); grunt.loadNpmTasks("grunt-contrib-less");};
5.打开Task Explorer
右键gruntfile.js文件:
注:如果没有出现less项,点击刷新即可。
Run后结果:
查看生成的site.css文件:
由此可见把site.less编译成site.css成功!
6.小结
关于Grunt还有其它功能,它非常强悍,好用。在我以后的学习以后再补充吧!
VS2015 VNext学习系列之五:Grunt篇
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。