【前端开发】优化代码之减少引入，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"

更多语法可以参考http://www.zhangxinxu.com/jq/stylus/import.php