分享个人 Full-Stack JavaScript 项目开发经验
如果你还没使用过 Grunt，可先阅读Grunt的安装及其插件的选择。本文介绍如何使用 Grunt 的 grunt-contrib-compass 插件在构建 UI 框架时为我们实时编译使用 Compass 的 Sass 文件。
安装 grunt-contrib-compass 插件开发依赖：
yarn add grunt-contrib-compass --dev在 Gruntfile 配置中添加插件的配置：
'use strict';
module.exports = function (grunt) {
const {dir} = require('./Grunt.config');
grunt.initConfig({
compass: {
options: {
sassDir: `${dir.sass}`,
cssDir: `${dir.cssDev}`,
cacheDir: `${dir.sassCache}`,
sourcemap: true,
outputStyle: 'expanded'
},
watchScss: {
options: {
watch: true // 监听自动编译
}
},
dist: {
options: {
watch: false // 手动编译
}
}
}
});
require('load-grunt-tasks')(grunt);
// 编译 sass 成 css
grunt.registerTask('sass', ['compass:dist']);
// 监听编译 sass 成 css
grunt.registerTask('sass-watch', ['compass:watchScss']);
}在配置中，我们设置的主要参数包括：sass 目录路径、编译后生成 css 的路径、sass 缓存目录路径、开启 sourcemap 、编译输出风格为展开和是否监听并实时编译。在 compass 任务中，我们设置了 watchScss 和 dist 两个目标，分别配置为实时监听和一次性编译。
使用该插件需要注意的问题：
要了解 grunt-contrib-compass 插件的详细说明，请点击这里。