【前端开发】优化代码之减少引入，css预编译语言的优点，stylus的使用
前言：我必须得承认在最最最开始的时候，我对于css的预编译是非常不以为然的，这是错误的。一般在页面编写过程中，我会将需要reset的css放在reset.css中，讲会需要重复用到的放置到public.css中，对于常用的几个数据，例如字体font-10，font-12，font-24，font-36，对于margin来说margin-top-10，margin-bottom-10等等，这样修改起来也非常方便，不过在看了（瞬间忘记了书名）以后，减少引入能够优化页面性能。
我们都知道，浏览器的工作原理，它向服务器端发送请求，服务器返回所请求的文件，那么显然文件越少越好。精灵图就是为了减少客户端向服务器发送请求。
在css中将公用的css文件复制到所需要的文件中是极为耗时并且不方便的，使用预编译语言能够解决这个问题，那么在页面引用中只需要引入当前页面对应css文件就可以了。
这里顺便介绍一下stylus预编译语言。
一、环境安装
stylus的安装依赖nodejs环境，因此需要先安装nodejs环境，这个怎么安装在上篇中有写到。
简单带过，就是进入nodejs官网，下载首页显示的最新版本，安装，完成以后打开cmd命令行，进入到当前目录文件夹中。
二、stylus安装
在控制面板中输入命令，npm install stylus -g
npm install stylus --save-dev
三、grunt构建工具和gulp构建工具
grunt比较复杂，这里就只简单介绍一下gulp，在上一篇介绍nodejs的博客中应该有提到gulp自动化构建工具。这里安装完成以后，需要一个gulpfile.js文件，在根目录下直接输入gulp会启动default任务命令。你可以再写一个default去调用，也可以在命令行输入调用任务名。
var gulp = require('gulp');
var stylus = require('gulp-stylus');
gulp.task('stylus', function(){
return gulp.src('./assets/stylus/**/*.styl')
.pipe(stylus())
.pipe(gulp.dest('./assets/css'));
});
四、重要的语法
导入：@import，（这就是我为什么突然痛改前非的原因！！！！）
@import "reset.css"
可以导入css可以导入stylus，当没有后缀名的时候，会认为导入的是stylus
@import"reset"
