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。