grunt 如何配置 sass 文件编译到 css 文件?
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
现在一般来说,css
文件都是由scss
或者less
之类的文件,编译完成的了。很少会单独写css
文件了。据说是因为,手写css
文件,就是会显得有些low。不管如何,苏南大叔认为:要赶得上趋势,对吧?即使赶不上,也要努力不让自己差的太远。在本文中,苏南大叔描述的就是:如何配置grunt
任务,做到scss
文件到css
的编译。
当然,关于scss
/sass
/less
这些东东,到底有什么区别,并不是本文的讨论范围。
安装编译器
首先要明确的观点是:grunt
的sass
插件,仅仅是个调用。ruby
和sass
编译器的安装,是没跑的。那么,对于开发者来说,就是个比较大的安装量了。
请确认安装好了ruby
环境,下面的两个链接,是描述如何安装ruby
的。
- 《win系统安装ruby》 https://newsn.net/say/ruby-install-win.html
- 《mac系统安装ruby》 https://newsn.net/say/ruby-install-mac.html
安装好ruby
之后,就需要利用gem
安装sass
编译器。
gem install sass
安装grunt
插件
一切准备就绪,只欠东风!苏南大叔在项目根目录下面安装了模块grunt-contrib-sass
。
npm install grunt-contrib-sass --save-dev
完整配置代码
下面的是完整的Gruntfile.js
的源码:
module.exports = function (grunt) {
pkg: grunt.file.readJSON('package.json'),
grunt.initConfig({
meta: {
srcPath: '../',
deployPath: './build/'
},
sass: {
dist: {
files: {
'<%= meta.srcPath %>css/css.css': '<%= meta.srcPath %>css/css.scss'
},
options: {
sourcemap: 'none',
style: 'compressed'
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['sass']);
}
这里定制了sass
编译的两个参数,分别是:
sourcemap: 'none',
style: 'compressed'
更多参数,可以参见这里:
执行方式
执行grunt
的方式很简单,就是在Gruntfile.js
的所在目录,执行下面的命令即可:
grunt
总结
grunt
是比较常用的前端工具,大家一定要掌握它的基本用法。更多grunt
相关经验文章。请点击:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。