1. 为什么用grunt?
相信现在如果提起grunt的话很多人都会觉得，"你真的很out，现在前端领域，谁不用webpack"。
那我只能回答，我目前就喜欢用这grunt，我喜欢自己写些简单的构建任务。上webpack是时代所驱使，但是，并没有任何一条法律规定上webpack就不能用grunt啊。而且目前发现bootstrap最新版本也还在用着grunt。所以，我也是干脆跟着bootstrap的脚步走着先吧。
2. 为什么是sass?
前端领域很多人都知道，为了让css更加容易维护，我们可以用less 或者 sass两种语言，来编写一些更加生动，简洁，可维护性高的"css"(应该说类css)代码。我们可以定义变量，方法等等使得我们的样式文件得以模块化，最后再把相关的文件编译成一个单独的css文件发布到生产环境中。
为何我选sass, 因为
-
sass编译器是ruby写的。(有偏见)。 - 最新版本的bootstrap, 当然我说的是bootstrap4，默认的源码发布的就是
sass版本的源码，我最近也在看它的源代码。而且首页并没有发现less的踪影，所以毫无疑问地选择了sass。
3. 这篇文章要解决什么问题?
写这篇文章，主要目的是我个人学习的时候需要:
当我编写一个sass或者scss(其实两者是差不多的，都是用sass编译)的文件的时候，其实浏览器并不能直接解析这些代码。所以我们必须在使用我们修改的样式之前通过sass编译器来对相应的文件进行预编译。这听起来是一个比较繁琐的过程。平时改css文件，然后直接刷新页面就可以了。现在还要手动编译，听起来就是回到了当年写c的日子。gcc编译后，然后再./a.out运行编译好的代码。不过前端工程化，自动化的今天，我们还是秉持着DRY的原则，让代码来实现这些繁琐的步骤，我们只需要安心的修改sass相关的样式文件，让代码来自动生成最新的css文件。
4. 解决思路
先来看看我的目录结构:
component
├── Gruntfile.js
├── dist
├── index.html
├── js
├── node_modules
├── package.json
└── scss
上面是我的目录下的结构，我的主要目的是让grunt可以自动监测 scss目录里面的文件修改，如果修改了，就自动编译目录里面的文件。把生成的css文件放到dist/css目录里面。然后我的页面index.html只要直接引用用dist/css里的指定文件就可以了，如下:
<link rel="stylesheet" href="dist/css/custom.css" />
再看看scss目录里面的东西。
scss
├── _buttons.scss
├── _common.scss
├── _variables.scss
└── custom.scss
这里可以看到除了custom.scss其他都是以_开头的，表示其他都是充当模块，让其他文件来导入。编译后只会生成custom.css, custom.css.map这样的文件。我们只要使用第一个就行了。
脚本里我主要分3步:
- 监测
scss/目录里的*.scss文件是否修改。 - 如果修改了则删除原来旧的
dist/目录。 - 重新编译，生成新的
dist/目录，以及目录下的文件。
因此，这里会用到以下三个grunt模块.
-
grunt-contrib-clean用来删除目录。 -
grunt-contrib-sass用来编译sass相关的文件。 -
grunt-contrib-watch用来监测某目录下的文件是否发生改变。
我们可以通过npm install XXXXX --save-dev来安装上面文件。
下面是我最后写的Gruntfile.js的源代码。
module.exports = function(grunt) {
// 使用严格模式
'use strict';
// 这里定义我们需要的任务
grunt.initConfig({
// 设置任务，删除文件夹
clean: {
dist: 'dist'
},
// 通过sass编译成css文件
sass: {
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
// 检测改变，自动跑sass任务
watch: {
scripts: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
}
});
// 一定要引用着3个模块
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist，然后重新编译，最后监测文件夹的情况。
grunt.registerTask('default', ['clean:dist', 'sass:dist', 'watch:scripts']);
};
代码完成后，只需要开发的时候切换到Gruntfile.js文件所在的目录下运行:
grunt
这条命令会根据Gruntfile.js文件开启一个服务，除非我们手动去关闭，否则它会一直监测着scss/目录的状态。
我们便可以放心地修改scss目录里的sass相关的文件。然后直接在index.html页面上看到效果了。
相关代码已经托管到 GitHub上,欢迎吐槽。
今天就到这吧。
网友评论