如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

现在一般来说,css文件都是由scss或者less之类的文件,编译完成的了。很少会单独写css文件了。据说是因为,手写css文件,就是会显得有些low。不管如何,苏南大叔认为:要赶得上趋势,对吧?即使赶不上,也要努力不让自己差的太远。在本文中,苏南大叔描述的就是:如何配置grunt任务,做到scss文件到css的编译。

grunt 如何配置 sass 文件编译到 css 文件? - grunt_sass
grunt 如何配置 sass 文件编译到 css 文件?(图3-1)

当然,关于scss/sass/less这些东东,到底有什么区别,并不是本文的讨论范围。

安装编译器

首先要明确的观点是:gruntsass插件,仅仅是个调用。rubysass编译器的安装,是没跑的。那么,对于开发者来说,就是个比较大的安装量了。

grunt 如何配置 sass 文件编译到 css 文件? - scss
grunt 如何配置 sass 文件编译到 css 文件?(图3-2)

请确认安装好了ruby环境,下面的两个链接,是描述如何安装ruby的。

安装好ruby之后,就需要利用gem安装sass编译器。

gem install sass

grunt 如何配置 sass 文件编译到 css 文件? - gem_install_sass
grunt 如何配置 sass 文件编译到 css 文件?(图3-3)

安装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是比较常用的前端工具,大家一定要掌握它的基本用法。更多grunt相关经验文章。请点击:

 【源码】代码片段及相关软件点此获取

 【scss】秘籍文章入口,仅传授于有缘之人   scss    grunt

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!