css脚本（SASS、SCSS、Less）和使用Gulp转换css

CSS脚本

使用sass需要安装Ruby，或者gulp安装node-sass这个模块

• CSS 指层叠样式表 (Cascading Style Sheets)。
• Sass (Syntactically Awesome StyleSheets)，后缀名为.sass，是由ruby语言编写的一款css预处理语言，它是基于ruby在服务器处理的。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
• SCSS (Sassy CSS)，后缀名为 .scss。SCSS 是 Sass 3 引入新的语法，与原来的语法兼容，只是用{ }替代了原来的缩进。SCSS语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
• Less 后缀名为 .less。与Sass类似，也是一款css预处理语言。与Sass不同的是，Less是基于Javascript，是在客户端处理的。Less 既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以运行在 Node 服务端。

SASS、SCSS、Less语法学习

• 详细请到less中文网：http://lesscss.cn/

• 详细请到sass中文网：https://www.sass.hk/

一 什么是Ruby

Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言，

1 安装ruby

安装的时候最后一步全选

环境变量配置：如果在vscode中gem报错则需要找到C:/Ruby23-x64/bin复制路径，打开我的电脑属性添加到系统变量path中

2 gem 命令

安装ruby之后会自带一个gem命令

安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v//如安装成功会打印
//ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]

因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源：

//1.删除原gem源
gem sources --remove  https://rubygems.org/

//2.添加国内gem源
gem sources --add https://gems.ruby-china.com/

//3.打印是否替      换成功
gem sources -l

3 安装sass

需要安装这两个插件

• gem install sass
• gem install compass

验证安装情况：

sass -v

(1) Compass是什么？

简单说，Compass是Sass的工具库（toolkit）。

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby。

4 使用

(1) 单个文件转换为css

sass input.scss output.css
/.目标sass文件到输出css文件
sass ./sass/a.sass ./css/a.css

(2) 监听watch

不需要每次重新启动，自动检测

sass --watch  ./sass:./css//监视整个文件目录
sass --watch  

Ctrl+C跳出监视

Gulp中使用CSS脚本

1. yarn global add gulp@3 //安装全局gulp

2. yarn add gulp@3//项目安装3 版本

3. yarn add gulp-sass --save-dev //gulp安装在开发依赖

   安装依赖如果node-sass报错输入yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

一 不用插件写法

在项目中创建gulpfile.js填写配置

//加载gulp模块
var gulp=require("gulp");
//定义了一个叫做a的任务，在终端中输入gulp a，可以执行该任务
gulp.task("a",function(){
    console.log("aaa")
});
//如果每一个参数为default，在终端中输入gulp，即可执行该任务
gulp.task("default",function(){
    console.log("888")
})

//终端输入
//执行默认
gulp

二 使用Gulp插件

安装都为开发依赖 --save-dev

yarn add XXXX --save-dev

1. gulp-load-plugins 自动加载插件
2. gulp-concat 合并文件
3. gulp-uglify 压缩文件
4. gulp-rename 重命名

在没有使用自动加载插件插件的时候用法

var gulp = require('gulp');
var concat=require("gulp-concat");
var uglify=require("gulp-uglify");
var rename=require("gulp-rename");
//......
gulp.task("a",function(){
    gulp.src("./src/js/*.js")
    .pipe(concat("c.js"))
    .pipe(uglify())
    .pipe(rename("c.min.js"))
    .pipe(gulp.dest("./dist/"));
});

使用后

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
gulp.task("a",function(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"));
});