1. 為什么用grunt?
相信現(xiàn)在如果提起grunt的話很多人都會覺得，"你真的很out，現(xiàn)在前端領(lǐng)域，誰不用webpack"。
那我只能回答，我目前就喜歡用這grunt，我喜歡自己寫些簡單的構(gòu)建任務(wù)。上webpack是時代所驅(qū)使，但是，并沒有任何一條法律規(guī)定上webpack就不能用grunt啊。而且目前發(fā)現(xiàn)bootstrap最新版本也還在用著grunt。所以，我也是干脆跟著bootstrap的腳步走著先吧。
2. 為什么是sass?
前端領(lǐng)域很多人都知道，為了讓css更加容易維護，我們可以用less 或者 sass兩種語言，來編寫一些更加生動，簡潔，可維護性高的"css"(應(yīng)該說類css)代碼。我們可以定義變量，方法等等使得我們的樣式文件得以模塊化，最后再把相關(guān)的文件編譯成一個單獨的css文件發(fā)布到生產(chǎn)環(huán)境中。
為何我選sass, 因為
-
sass編譯器是ruby寫的。(有偏見)。 - 最新版本的bootstrap, 當(dāng)然我說的是bootstrap4，默認的源碼發(fā)布的就是
sass版本的源碼，我最近也在看它的源代碼。而且首頁并沒有發(fā)現(xiàn)less的蹤影，所以毫無疑問地選擇了sass。
3. 這篇文章要解決什么問題?
寫這篇文章，主要目的是我個人學(xué)習(xí)的時候需要:
當(dāng)我編寫一個sass或者scss(其實兩者是差不多的，都是用sass編譯)的文件的時候，其實瀏覽器并不能直接解析這些代碼。所以我們必須在使用我們修改的樣式之前通過sass編譯器來對相應(yīng)的文件進行預(yù)編譯。這聽起來是一個比較繁瑣的過程。平時改css文件，然后直接刷新頁面就可以了?，F(xiàn)在還要手動編譯，聽起來就是回到了當(dāng)年寫c的日子。gcc編譯后，然后再./a.out運行編譯好的代碼。不過前端工程化，自動化的今天，我們還是秉持著DRY的原則，讓代碼來實現(xiàn)這些繁瑣的步驟，我們只需要安心的修改sass相關(guān)的樣式文件，讓代碼來自動生成最新的css文件。
4. 解決思路
先來看看我的目錄結(jié)構(gòu):
component
├── Gruntfile.js
├── dist
├── index.html
├── js
├── node_modules
├── package.json
└── scss
上面是我的目錄下的結(jié)構(gòu)，我的主要目的是讓grunt可以自動監(jiān)測 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其他都是以_開頭的，表示其他都是充當(dāng)模塊，讓其他文件來導(dǎo)入。編譯后只會生成custom.css, custom.css.map這樣的文件。我們只要使用第一個就行了。
腳本里我主要分3步:
- 監(jiān)測
scss/目錄里的*.scss文件是否修改。 - 如果修改了則刪除原來舊的
dist/目錄。 - 重新編譯，生成新的
dist/目錄，以及目錄下的文件。
因此，這里會用到以下三個grunt模塊.
-
grunt-contrib-clean用來刪除目錄。 -
grunt-contrib-sass用來編譯sass相關(guān)的文件。 -
grunt-contrib-watch用來監(jiān)測某目錄下的文件是否發(fā)生改變。
我們可以通過npm install XXXXX --save-dev來安裝上面文件。
下面是我最后寫的Gruntfile.js的源代碼。
module.exports = function(grunt) {
// 使用嚴格模式
'use strict';
// 這里定義我們需要的任務(wù)
grunt.initConfig({
// 設(shè)置任務(wù)，刪除文件夾
clean: {
dist: 'dist'
},
// 通過sass編譯成css文件
sass: {
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
// 檢測改變，自動跑sass任務(wù)
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');
// 把需要跑的任務(wù)注冊到default這里每次運行g(shù)runt的時候先刪除dist，然后重新編譯，最后監(jiān)測文件夾的情況。
grunt.registerTask('default', ['clean:dist', 'sass:dist', 'watch:scripts']);
};
代碼完成后，只需要開發(fā)的時候切換到Gruntfile.js文件所在的目錄下運行:
grunt
這條命令會根據(jù)Gruntfile.js文件開啟一個服務(wù)，除非我們手動去關(guān)閉，否則它會一直監(jiān)測著scss/目錄的狀態(tài)。
我們便可以放心地修改scss目錄里的sass相關(guān)的文件。然后直接在index.html頁面上看到效果了。
相關(guān)代碼已經(jīng)托管到 GitHub上,歡迎吐槽。
今天就到這吧。
