LibSass + Susy + Grunt 整合实践

Z时代
2024-01-10
分类：综合

我所熟悉的每一个开发者，都急切地盼望着在开发中使用上 LibSass。当 Eric 宣布 Susy 已经可以完美融入 LibSass 的时候，我激动的跳了起来，并开始思考使用 Grunt 来创建一个构建流程。

本文中我将会向你演示，我是如何配置 Grunt 来整合 LibSass 和 Susy 的。

前提

在本文中，我会假设你已经安装了 Node JS，Bower 和 Grunt JS。如果还没有安装，请遵循官方说明安装下列工具。

Node JS http://nodejs.org

Bower http://bower.io

Grunt JS http://gruntjs.com

安装完成后，就新建一个文件夹，让我们开始这个项目吧。

配置项目

因为我们在项目中使用了 grunt 和 bower，所以可以轻松管理项目中 node 和 bower 的相关依赖。

首先，我们需要建立 package.json 和 bower.json 文件夹。可以使用 npm init 命令创建 package.json 文件，使用 bower init 命令创建 bower.json 文件。

$ npm init

Susy

$ bower init

Susy

现在，文件夹的结构如下：

Susy

接下来，我们需要安装 grunt 软件包，用来自动化处理 LibSass 和 Susy。

安装 Grunt 软件包

我们需要名为 grunt-sass 的 node 软件包来运行 LibSass 和 Susy。来安装吧：

$ npm install grunt-sass --save-dev

你可能会希望实时监视和自动编译 Sass 文件到 CSS 文件，那么就需要安装 grunt-contrib-watch 软件包：

$ npm install grunt-contrib-watch --save-dev

现在，你的项目目录结构就像下图一样了：

Susy

我们已经安装了所有必须的 node 软件包，可以使用 LibSass 将 Sass 转换为 CSS 了。那么，继续使用 Bower 安装相关的前端依赖吧。

安装 Bower 软件包

本文中，唯一需要安装的 Bower 软件包就是 Susy：

bower install susy --save

现在的目录结构就像这样了：

Susy

还要记得将你的 HTML、SCSS 和 CSS 文件夹导入项目来：

Susy

我们需要将 Susy 导入到样式表中，才能够使用它。如果你的项目结构和上图相同，那么下面就是导入 Susy 的命令：

@import "../bower_components/susy/sass/susy";

提醒：如果你想使用 breakpoint 混合宏，那么可以安装 breakpoint-sass。这一步并不是必须的，因为从 Susy 2.2.2 版本开始，就不再依赖 breakpoint-sass，完全可以忽略这个软件包。不过，我还是很喜欢在工作流中使用 breakpoint 混合宏，所以还会安装它：

# Note! This is optional! bower install breakpoint-sass --save

安装完成后，也需要导入到样式表中：

@import "../bower_components/breakpoint-sass/stylesheets/breakpoint";

好了，我们已经安装了所有必须的库。让我们继续编写 Gruntfile 吧——这可是所有工作的核心！

编写 Gruntfile

编写 Gruntfile 最简单的方式，就是创建一个 Grunt.js，然后放进项目根目录中。

Susy

然后再将下述内容编写到 Gruntfile.js 中：

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
  });
  // Loads Grunt Tasks
  // Default task(s).
};

编写 Gruntfile 的第一步，就是要把需要运行的任务添加到文件中。在我们的这个项目中，需要添加 grunt-sass 和 grunt-contrib-watch 软件包，所以，内容如下：

module.exports = function(grunt) {
  // Project configuration.
  // ... 
  // Loads Grunt Tasks
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // Default task(s).
  // ...
};

然后，需要根据项目的目录结构编写 Grunt：

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    // Grunt-sass 
    sass: {
      app: {
        // Takes every file that ends with .scss from the scss 
        // directory and compile them into the css directory. 
        // Also changes the extension from .scss into .css. 
        // Note: file name that begins with _ are ignored automatically
        files: [{
          expand: true,
          cwd: 'scss',
          src: ['*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      },
      options: {
        sourceMap: true, 
        outputStyle: 'nested', 
        imagePath: "../",
      }
    },
    // Grunt-contrib-watch
    watch: {
      sass: {
        // Watches all Sass or Scss files within the scss folder and one level down. 
        // If you want to watch all scss files instead, use the "**/*" globbing pattern
        files: ['scss/{,*/}*.{scss,sass}'],
        // runs the task `sass` whenever any watched file changes 
        tasks: ['sass']
      },
      options: {
        // Sets livereload to true for livereload to work 
        // (livereload is not covered in this article)
        livereload: true,
        spawn: false
      }
    },
  });
  // Loads Grunt Tasks
  // ...
  // Default task(s).
  // ...
}

最后，需要注册一个任务，方便 Grunt 启动项目。可以使用 registerTask 命令创建此类任务。

module.exports = function(grunt) {
  // ... 
  // Default task(s).
  // This registers a task that runs `sass`, followed by `watch`. 
  grunt.registerTask('default', ['sass', 'watch']);
}

Gruntfile 就大功告成了。