前言
嗨，还在老老实实的书写CSS代码么？还在为javascript语句的有些兼容性而苦恼么？想提高开发速度吗？让我们沐浴在知识的阳光下，愉快的敲代码吧。好了，我要讲话了，接下来跟着我进入stylus，babel，lgulp的世界吧。
一、stylus
Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。
Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。Stylus功能上更为强壮，和js联系更加紧密。
stylus安装
$ yarn global add stylus
stylus应用
stylus
body,html
margin:0
padding:0
编译成
body,
html {
margin: 0;
padding: 0;
}
Nesting(嵌套)
stylus
header
#logo
border:1px solid red
ul
li a
display: block
color: blue
padding: 5px
html.ie &
padding: 6px
&:hover
color: red
编译成
header #logo {
border: 1px solid #f00;
}
ul li a {
display: block;
color: #00f;
padding: 5px;
}
html.ie ul li a {
padding: 6px;
}
ul li a:hover {
color: #f00;
}
Functions 方法
返回值
stylus
/* 带参数 */
border-radius(val)
-webkit-border-radius: val
-moz-border-radius: val
border-radius: val
button
border-radius(5px);
/* 不带参数 */
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
button
border-radius: 5px 10px;
编译成
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* 不带参数 */
button {
-webkit-border-radius: 5px 10px;
-moz-border-radius: 5px 10px;
border-radius: 5px 10px;
}
Variables(变量)
stylus
font-size = 14px
body
font font-size Arial, sans-seri
编译成
body {
font: 14px Arial, sans-seri;
}
变量放在属性中
stylus
#prompt
position: absolute
top: 150px
left: 50%
width: w = 200px
margin-left: -(w / 2)
编译成
#prompt {
position: absolute;
top: 150px;
left: 50%;
width: 200px;
margin-left: -100px;
}
块属性访问引用
stylus
#prompt
position: absolute
width: 200px
margin-left: -(@width / 2)
编译成
#prompt {
position: absolute;
width: 200px;
margin-left: -100px;
}
命令行（进入指定文件夹 依据已创建的common.styl 文件 创建common.css文件）stylus common.styl -o common.css
stylus -w common.styl -o common.css （加-w 一直监听.styl样式转变，自动编译成css文件）
stylus中文版
二、babel
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。
配置babel
命令
$ yarn add babel-cli
$ yarn add babel-plugin-transform-object-assign
$ yarn add babel-preset-es2015
配置文件.babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{
"presets": ["es2015"],
"plugins": ["transform-object-assign"]
}
生成的package.json
{
"dependencies": {
"babel-cli": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.24.1"
}
}
栗子：(index.js)
var obj = { a: 1 };
let objA = { b: 2 };
var obj1 = Object.assign({}, obj, objA);
console.log(obj1);
经过babel转换后的代码(babel.js)
$ index.js -o babel.js
```js
"use strict";
var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var obj = { a: 1 };
var objA = { b: 2 };
var obj1 = _extends({}, obj, objA);
console.log(obj1);
三、gulp
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
安装
初始化node项目:
$ npm init -y
本地安装glup:
$ yarn add gulp
本地安装browser-sync:
$ yarn add browser-sync
本地安装gulp-stylus:
$ yarn add glup-stylus
本地安装gulp-minify-css:
$ yarn add gulp-minify-css （css文件压缩）
本地安装gulp-uglify:
$ yarn add gulp-uglify （js文件压缩）
gulp 任务配置browser-sync
// 定义工作流
var gulp = require('gulp');
// 配合gulp 有一些配合插件
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('watch', function() {
// 启动browser-sync
browserSync.init({
server: './'
});
var temlateFiles = [
'*.html'
];
gulp.watch(temlateFiles).on('change', reload);
});
gulp 任务配置 stylus
var stylusPath = './src/stylus/*.styl';
var stylus = require('gulp-stylus');
var minifyCss = require('gulp-minify-css');
gulp.task('stylus', function() {
return
gulp.src(stylusPath)
.pipe(stylus()).
pipe(minifyCss())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
结语
站在巨人的肩膀上。学习是一个漫长的过程，如本文中有不合适的部分，还请您指教，欢迎一起交流学习，共同进步。
网友评论