grunt編譯sass
『壹』 grunt怎麼把less編譯成css文件
Grunt任務分為兩部分，一部分是任務，即Grunt要執行的代碼，找到對應功能的插件就成。所以等會要下載grunt-contrib-less包，這個插件便是把less文件編譯成能直接使用的css。另一部分是配置，即傳給grunt.initConfig方法的對象。
步驟一：在終端安裝插件
同樣使用到了node.js里的包管理器npm，在終端里執行下述命令：
npminstallgrunt-contrib-less--save-dev
–save-dev」的意思是，在當前目錄安裝grunt的同時，順便把grunt保存為這個目錄的開發依賴項。要注意安裝的目錄應該是你的項目的根目錄，而且本地已經裝好了grunt，建立了package.json文件。package.json文件中無法包含全局安裝的包，因此Grunt包和任務插件要求在本地安裝Grunt，這樣代碼才能在不同設備中正常運行。
['public/*.less',//匹配public文件夾中拓展名為.less的所有文件'public/**.*.less',//還能匹配public文件夾的子文件中的文件，
//而且嵌套層級多深
'!public/vendor/**/*.less//和第二個作用一樣，不過！符號表明
//要從結果中排除匹配的文件
]
有一點需要注意的是，不管多少個less文件，編譯得到的css都只會打包到一個文件中。
『貳』 如何用grunt創建compass和自動刷新
在grunt serve啟動時當.sass文件發生變化時，自動編譯更新.css文件
HOWTO
我覺得你首先要弄明白是哪個任務使得grunt serve任務執行時能夠檢查文件變化並進行編譯。
在這里是watch這個task，關於grunt-contrib-watch請點擊查看文檔
TODO
在watch的任務中需要指定對.sass文檔的編譯任務
這里參考grunt-contrib-watch的官方給出的代碼
https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html
grunt.initConfig({
sass: {
dev: {
src: ['src/sass/*.sass'],
dest: 'dest/css/index.css',
},
},
watch: {
sass: {
// We watch and compile sass files as normal but don't live reload here
files: ['src/sass/*.sass'],
tasks: ['sass'],
},
livereload: {
// Here we watch the files the sass task will compile to
// These files are sent to the live reload server after sass compiles to them
options: { livereload: true },
files: ['dest/**/*'],
},
},
});
CONCLUSION
好好讀讀grunt-contrib-watch的官方文檔，你要的都在裡面
『叄』 沒有項目經驗的前端應屆生，如何面試才會被錄用
一、 基本溝通能力的測試
作為一個面試人員，如果不能很好的進行自我介紹說明他的溝通能力存在一定的障礙，應屆生則更需要做好充足的准備，不打無把握的仗。准備好完整的自我介紹是首要工作，這樣做的目的從側面還可以反映出你對於工作的態度以及對與該工作崗位和公司的重視。
二、 基礎知識的掌握
包括一些技術的規范、框架的掌握、插件及類庫的使用以及具體業務功能的嘗試要有一定的概念。你可以沒有實際的項目，但是不能不掌握基本的知識結構。H5/C3/Es5/Es6/Amd/Cmd/Commonjs等規范，Jquery/Zepto/Bootstrap/Easyui等框架，Swiper/Iscroll/Lodash/Moment等插件類庫，一般項目的功能模塊有哪些等。
三、 現代框架技術的熟悉
什麼是MVC、MVVM，Vue/React/Angular等屬於什麼類型的框架，與傳統框架又有什麼區別，和他們配合的UI框架有哪些，應用這些架框需要使用什麼開發工具，什麼構建工作等。
四、 知識范圍的擴展
對於原生JS的知識擴展包括一些常用演算法，對於現代化前端框架配合的Gulp/Webpack/Grunt以及前端預編譯樣式程序Sass/Less等有無一定的了解。能不能將示例項目的代碼託管到碼雲、Github、Coding上。
五、 排錯能力的展現
遇到問題了以後會進行怎麼樣的工作順序?先看出錯信息、斷點調試、步調、測試工作的使用等。
六、 學習方法的應用
學習需要有一定的方法，比如說六何分析法。學習還需要定期的總結，有沒有自己的一些總結內容和總結心得。
七、 心態的狀態
公司看的面試人員的重要標准就是能力，而在沒有技術能力的前提下要看到的是員工的心態。對應的能力獲取對應的薪酬，如果說能力不足的情況下能否接受相對較低的薪酬標准，不能眼高手低。
八、 有無示例項目，包括碼雲、Github賬號
沒有完整的項目經驗不代表沒有操作過，包括示例項目，可以將自己的一些學習項目以及嘗試項目做好Git的維護，也能夠相應的加分。
『肆』 怎樣用grunt創建gruntfile文件
工具/原料
NodeJs
Windows系統
方法/步驟
要使用Grunt，第一件事是安裝Node.js。（即使你沒用過Node.js也不用擔心——你只需安裝它讓Grunt能運行。）
安裝了Node.js之後，用命令行工具執行以下命令：
$ npm install -g grunt-cli
要確認Grunt是否正確安裝，可以使用以下命令：
$ grunt --version
下一步是在你的項目的根目錄下創建package.json和gruntfile.js兩個文件。
創建package.json文件
這個JSON文件讓我們指定我們的開發環境所依賴的必須模塊。有了它，項目的所有開發者都能保證安裝上一致的必須模塊，從而保證所有人擁有一樣的開發環境。
在項目根目錄下的pacakge.json文件中寫上：
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Brandon Random",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
}
然後在命令行工具運行：
$ npm install
該命令告訴npm 需要安裝的必須模塊，npm會安裝它們，自動保存在項目根目錄下一個叫做 node_moles 的文件夾里。
創建gruntfile.js文件
gruntfile.js 文件本質上就是一個wrapper函數，接受grunt作為參數：
mole.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
現在你已經可以在項目根目錄下運行grunt命令行工具了。
$ grunt
> Task "default" not found. Use --force to continue.
這里我們只指定了Grunt作為必須模塊，還沒定義任何任務。接下來我們就要指定任務和必須模塊。首先來看如何拓展package.json文件。
拓展package.json文件
使用Node.js最好的一點，就是它可以根據package.json文件的內容，一次性查找和安裝多個package。要安裝我們項目的所有必須任務，只須在package.json文件中加上以下內容：
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Mike Cunsolo",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0",
"grunt-contrib-cssmin": "*",
"grunt-contrib-sass": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"matchdep": "*"
}
}
那麼如何實現安裝？你肯定已經猜到了：
$ npm install
使用Grunt載入任務
package安裝好後，還必須被Grunt載入才能為我們所用。使用 matchdep，我們用一行代碼就可以自動載入所有任務。這是開發流程的一大優化，因為現在我們只須把必須任務列表寫在package.json一個文件里，便於管理。
在gruntfile.js里，grunt.initConfig之上，寫上以下代碼：
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
要是沒有matchdep，我們就必須為每一個必須任務寫一次grunt.loadNpmTasks(「grunt-task-name」); ，隨著我們使用的任務的增加，這些載入任務的代碼很快就會變得相當繁冗。在Grunt載入這些任務前，我們還可以指定設置選項。
現在我們需要創建我們的HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Enter your first name</title>
<link rel="stylesheet" href="build/css/master.css">
</head>
<body>
<label for="firstname">Enter your first name</label>
<input id="firstname" name="firstname" type="text">
<p id="namevalidation" class="validation"></p>
<script type="text/javascript" src="build/js/base.min.js"></script>
</body>
</html>
用HTMLHint驗證HTML
在grunt.initConfig里加入下列設置代碼：
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
},
src: ['index.html']
}
}
一般來說，一個plugin的設置方法如下：plugin的名稱（去掉grunt-contrib-或grunt-前綴），選擇使用此plugin的一個或多個對象（在這里可以給不同文件設置此plugin 的不同選項），一個選項object，以及plugin要作用的對象。現在，如果我們用命令行工具運行grunt htmlhint，該plugin就會檢查我們在src里指定的HTML文件，驗證其中有沒有錯誤！但是每個小時都要手動運行幾次這個任務，很快就讓人覺得很繁瑣了。
自動化任務運行
watch是一個特殊的任務，它可以在目標文件保存時自動觸發一系列任務的運行。在grunt.initConfig里加入以下設置：
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
}
}
然後，在命令行工具中運行grunt watch命令。現在，你可以試試在index.html里加一行注釋，保存文件。你會注意到，保存文件時會自動觸發HTML的驗證！這是對開發流程的一大優化：在你寫代碼時，watch任務就會默默同時為你驗證代碼，如果驗證失敗任務就會報告失敗（它還會告訴你問題在哪）。
注意grunt watch任務會一直運行，直到命令行工具關閉，或手動停止（control+c在Mac中)。
保持JavaScript極簡
讓我們來寫一個驗證用戶輸入的名字的JavaScript文件。簡便起見，我們這里只檢查其中是否含有非字母的字元。我們的JavaScript會使用strict模式，這可以防止我們寫可用但低質量的JavaScript。創建assets/js/base.js文件並在其中寫上：
function Validator()
{
"use strict";
}
Validator.prototype.checkName = function(name)
{
"use strict";
return (/[^a-z]/i.test(name) === false);
};
window.addEventListener('load', function(){
"use strict";
document.getElementById('firstname').addEventListener('blur', function(){
var _this = this;
var validator = new Validator();
var validation = document.getElementById('namevalidation');
if (validator.checkName(_this.value) === true) {
validation.innerHTML = 'Looks good! :)';
validation.className = "validation yep";
_this.className = "yep";
}
else {
validation.innerHTML = 'Looks bad! :(';
validation.className = "validation nope";
_this.className = "nope";
}
});
});
讓我們用UglifyJS來極簡化這個源代碼，在grunt.initConfig中加上以下設置：
uglify: {
build: {
files: {
'build/js/base.min.js': ['assets/js/base.js']
}
}
}
UglifyJS會替換所有的變數和函數名，剔除所有空白和注釋，從而生成占據最小空間的JavaScript文件，對發布非常有用。同樣地，我們需要設置一個watch任務來使用它，在watch的設置里加入以下代碼：
watch: {
js: {
files: ['assets/js/base.js'],
tasks: ['uglify']
}
}
9
現在我們有了一個靜態HTML頁面，一個存放Sass和JavaScript源文件的assets文件夾，一個存放優化後的CSS和JavaScript的build文件夾，以及package.json文件和gruntfile.js文件。
至此你已經有了一個不錯的基礎來進一步探索Grunt。像之前提到的，一個非常活躍的開發者社區在為Grunt開發前端plugin。我建議你現在就到plugin library 去看看那300個以上的plugin。
『伍』 grunt-contrib-sass 如何自動編譯當前被修改的Sass文件
Ruby安裝由於sass依賴於ruby環境，所以在安裝sass之前必須安裝ruby。可以去官網下載一個。網路環境不好的，可以用我提供的這個文件：點擊下載安裝完成後可以在開始菜單找到ruby命令行，打開輸入ruby-v查看版本號，出現版本信息則安裝成功clipboard.png-6.6kB 截圖20160917210342.png-1.6kBSass安裝安裝完ruby後，可以直接在命令行裡面輸入geminstallsass安裝Sass，不過由於牆的厲害，建議使用淘寶的ruby源來安裝，步驟如下：gemsources--removelatest_specs.4.8.gz)sass-vSass3.4.13(SelectiveSteve)到此，所有的安裝都結束了。接下來我們就可以直接編譯sass文件了Sass編譯打開ruby命令行，切換到scss文件所在目錄，執行sassstyle.scssstyle.css,就可以將style.scss文件編譯成style.css文件
『陸』 如何轉變sass的代碼變成css的代碼
比如你寫了一個sass文件，叫index.scss，需要編譯成css文件(index.css)，
可以使用這個命令：
sass index.scss index.css
當然，sass一般是和compass結合這用，你可以用這個命令：
compass watch
這個命令會把所有的scss文件編譯成css文件，並且還會監聽這scss文件的變化，一有變化就重新編譯一下。。
如果你有前端自動化環境，拿grunt來說，配置好watch任務也能監聽scss文件變化並自動化編譯，命令是：
grunt watch
或
grunt serve
『柒』 為什麼我的sass 不會自動編譯成css
sass 不會自動編譯成css
要麼是沒compass compile，要麼是沒watch 不過這兩者都要保證路徑正確
『捌』 沒有項目經驗的前端應屆生，應該怎麼面試才會被錄用
一、基本溝通能力的測試
作為一個面試人員，如果不能很好的進行自我介紹說明他的溝通能力存在一定的障礙，應屆生則更需要做好充足的准備，不打無把握的仗。准備好完整的自我介紹是首要工作，這樣做的目的從側面還可以反映出你對於工作的態度以及對與該工作崗位和公司的重視。
二、基礎知識的掌握
包括一些技術的規范、框架的掌握、插件及類庫的使用以及具體業務功能的嘗試要有一定的概念。你可以沒有實際的項目，但是不能不掌握基本的知識結構。H5/C3/Es5/Es6/Amd/Cmd/Commonjs等規范，Jquery/Zepto/Bootstrap/Easyui等框架，Swiper/Iscroll/Lodash/Moment等插件類庫，一般項目的功能模塊有哪些等。
三、現代框架技術的熟悉
什麼是MVC、MVVM，Vue/React/Angular等屬於什麼類型的框架，與傳統框架又有什麼區別，和他們配合的UI框架有哪些，應用這些架框需要使用什麼開發工具，什麼構建工作等。
四、知識范圍的擴展
對於原生JS的知識擴展包括一些常用演算法，對於現代化前磁端框架配合的Gulp/Webpack/Grunt以及前端預編譯樣式程序Sass/Less等有無一定的了解。能不能將示例項目的代碼託管到碼雲、Github、Coding上。
五、排錯能力的展現
遇到問題了以後會進行怎麼樣的工作順序？先看出錯信息、斷點調試、步調、測試工作的使用等。
六、學習方法的應用
學習需要有一定的方法，比如說六何分析法。學習還需要定期的總結，有沒有自己的一些總結內容和總結心得。
七、心態的狀態
公司看的面試人員的重要標准就是能力，而在沒有技術能力的前提下要看到的是員工的心態。對應的能力獲取對應的薪酬，如果說能力不足的情況下能否接受相對較低的薪酬標准，不能眼高手低。
八、有無示例項目，包括碼雲、Github賬號
沒有完整的項目經驗不代表沒有操作過，包括示例項目，可以將自己的一些學習項目以及嘗試項目做好Git的維護，也能夠相應的加分。
來源：千鋒HTML5
『玖』 bootstrap中文網上的less怎麼用grunt編譯
始做點功能吧：Grunt實現Less實時編譯,web伺服器。
實現這些功能，
主要的就是安裝Grunt插件、編寫配置文件的工作。
安裝很簡單。
主要講解這個配置文件吧。
Gruntfile.js文件：
mole.exports = function(grunt) {
// include connect-include
var ssInclude = require("connect-include");
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
files: [{
expand: true,
cwd: './static/less',
src: ['**/*.less'],
dest: 'static/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
scripts: {
files: ['./static/less/**/*.less'],
tasks: ['less'],
options: {
spawn: false,
},
},
},
connect: {
server: {
options: {
port: 8080,
// 在connect與watch同時運行的時候，keepalive不能為true
，這里注釋了keepalive，因為他的默認值就是false。
// keepalive: true,
// livereload: true,
base: './static',
middleware: function(connect, options) {
// Same as in grunt-contrib-connect
var middlewares = [];
var directory = options.directory || options.base[options.base.length - 1];
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
// Here we insert connect-include, use the same pattern to add other middleware
middlewares.push(ssInclude(directory));
// Same as in grunt-contrib-connect
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
middlewares.push(connect.directory(directory));
return middlewares;
}
}
}
}
});
// Load the plugin that provides the "uglify" task.
// grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
// grunt.registerTask('default', ['uglify']);
grunt.registerTask('default', [ 'connect','watch']);
//使用watch，實時編譯less成功
};
package.json文件：
{
"name": "Grunt-base",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-less": "^1.0.0",
"grunt-contrib-watch": "^0.6.1"
},
"dependencies": {
"connect-include": "^0.2.1"
}
}
插件安裝完成，
寫好項目配置文件，運行：
使用CMD命令行：grunt
瀏覽器訪問http://127.0.0.1:8080/ 查看效果：
常見的構建工具：
Grunt、FIS（網路出品）等。
FIS也是一個不錯的構建工具。
目前很多的Web前端構建工具都是Node.js寫的。
我的項目結構：
注意事項：
如果你在使用中，grunt-contrib-connect、grunt-contrib-watch兩個同時搭配使用，出現不能正常工作的問題，要注意這個connect的這個配置：keepalive: false。
如果沒有配合grunt-contrib-watch的時候，keepalive配置往往是true，配合watch監聽的話，這個值就是false。