grunt构建工具：scss转css

原创

已于 2025-03-12 10:52:04 修改 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #scss #前端 #grunt

于 2025-03-12 10:51:34 首次发布

Grunt 是一个基于 JavaScript 的任务运行工具，通常用于自动化重复性任务，例如代码编译、文件压缩、单元测试等。它通过配置文件 Gruntfile.js 来定义任务和插件。
完整项目地址：https://github.com/ylpxzx/grunt-scss-to-css

以下是 Grunt 的一些关键概念：

Gruntfile.js: 这是 Grunt 的配置文件，用于定义任务和插件。它通常包含 module.exports 函数，里面有 grunt.initConfig 方法来初始化任务配置
任务 (Tasks): Grunt 的核心是任务。任务可以是单个任务，也可以是多个任务的组合。任务可以通过命令行运行，例如 grunt sass 或 grunt watch
插件 (Plugins): Grunt 有大量的插件，可以用来执行各种任务，例如编译 Sass、压缩 JavaScript 文件、运行单元测试等。插件可以通过 grunt.loadNpmTasks 方法加载
配置 (Configuration): 在 grunt.initConfig 方法中，定义了各个任务的配置。每个任务都有自己的配置选项，例如文件路径、选项等

用Grunt将scss文件转为css

初始化项目

新建项目目录：grunt-scss-to-css
在项目根目录执行以下命令进行项目初始化
```
npm init
```

准备工作

安装 grunt-cli
```
npm install -g grunt-cli
```
安装 ruby

官方下载地址：https://rubyinstaller.org/downloads/archives/

安装完成后，打开 cmd, 运行"ruby -v" 看是否安装完成 (直接在 vscode 终端执行，好像会提示不存在 ruby 指令)

在打开的项目根目录下执行下面命令，安装sass
```
gem install sass
```

安装构建项目所需的npm包

npm install grunt
# sass转css的包
npm install grunt-contrib-sass
# 监听文件变化后触发重新构建的包
npm install grunt-contrib-watch

在项目根目录下新建Gruntfile.js文件

项目结构如下：

请添加图片描述

构建逻辑编写

Gruntfile.js

module.exports = function(grunt) {
     
     

  grunt.initConfig({
     
         //初始化配置grunt任务
    sass: {
     
     
      dist: {
     
     
        files: {
     
     
          'dist/css/output.css': 'src/scss/index.scss'  // src/scss/index.scss文件编译后输出到dist/css/output.css文件
        }
      }
    },
    watch:{
     
     
      scripts:{
     
     
        files:["src/scss/*.scss"],  // 监控文件夹下的scss文件
        tasks:["sass"],  // 监控到文件变化后，执行sass任务
        options:{
     
     
          spawn: false
        }
      }
    },
  });
  
  grunt.loadNpmTasks('grunt-contrib-watch');   //加载watch监听插件任务
  grunt.loadNpmTasks('grunt-contrib-sass');   //加载sass插件任务

  grunt.registerTask('scsstocss', ['sass', 'watch']);  //新增一个注册任务test, 运行sass和watch任务
};

新增scss文件进行测试：src/scss/index.scss

* {
     
     
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
     
     
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg