前言
嗨擎椰，還在老老實實的書寫CSS代碼么？還在為javascript語句的有些兼容性而苦惱么创肥？想提高開發(fā)速度嗎达舒？讓我們沐浴在知識的陽光下，愉快的敲代碼吧叹侄。好了巩搏，我要講話了，接下來跟著我進入stylus趾代，babel塔猾，lgulp的世界吧。
一稽坤、stylus
Stylus 是一個CSS的預處理框架丈甸，2010年產(chǎn)生糯俗，來自Node.js社區(qū)，主要用來給Node項目進行CSS預處理支持睦擂，所以 Stylus 是一種新型語言得湘，可以創(chuàng)建健壯的、動態(tài)的顿仇、富有表現(xiàn)力的CSS淘正。比較年輕，其本質(zhì)上做的事情與 SASS/LESS 等類似臼闻，應(yīng)該是有很多借鑒鸿吆，所以近似腳本的方式去寫CSS代碼。
Stylus默認使用 .styl 的作為文件擴展名述呐，支持多樣性的CSS語法惩淳。Stylus功能上更為強壯，和js聯(lián)系更加緊密乓搬。
stylus安裝
$ yarn global add stylus
stylus應(yīng)用
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
/* 帶參數(shù) */
border-radius(val)
-webkit-border-radius: val
-moz-border-radius: val
border-radius: val
button
border-radius(5px);
/* 不帶參數(shù) */
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;
}
/* 不帶參數(shù) */
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;
}
命令行（進入指定文件夾 依據(jù)已創(chuàng)建的common.styl 文件 創(chuàng)建common.css文件）stylus common.styl -o common.css
stylus -w common.styl -o common.css （加-w 一直監(jiān)聽.styl樣式轉(zhuǎn)變思犁，自動編譯成css文件）
stylus中文版
二、babel
Babel是一個廣泛使用的轉(zhuǎn)碼器进肯，可以將ES6代碼轉(zhuǎn)為ES5代碼激蹲，從而在現(xiàn)有環(huán)境執(zhí)行。
這意味著江掩，你可以現(xiàn)在就用ES6編寫程序学辱，而不用擔心現(xiàn)有環(huán)境是否支持。
配置babel
命令
$ yarn add babel-cli
$ yarn add babel-plugin-transform-object-assign
$ yarn add babel-preset-es2015
配置文件.babelrc
Babel的配置文件是.babelrc环形，存放在項目的根目錄下策泣。使用Babel的第一步，就是配置這個文件斟赚。
該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件着降，基本格式如下。
{
"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);
經(jīng)過babel轉(zhuǎn)換后的代碼(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是前端開發(fā)過程中對代碼進行構(gòu)建的工具任洞，是自動化項目的構(gòu)建利器；她不僅能對網(wǎng)站資源進行優(yōu)化发侵，而且在開發(fā)過程中很多重復的任務(wù)能夠使用正確的工具自動完成交掏；使用她，我們不僅可以很愉快的編寫代碼刃鳄，而且大大提高我們的工作效率盅弛。
安裝
初始化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 任務(wù)配置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 任務(wù)配置 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());
});
結(jié)語
站在巨人的肩膀上。學習是一個漫長的過程，如本文中有不合適的部分挪鹏，還請您指教见秽，歡迎一起交流學習，共同進步讨盒。
