目前sass提供了观察文件变化，自动将sass文件编译成css的功能。如：
You can also tell Sass to watch the file and update the CSS every time the Sass file changes:
sass --watch input.scss:output.css
If you have a directory with many Sass files, you can also tell Sass to watch the entire directory:
sass --watch app/sass:public/stylesheets
在有些机子上跟踪编译非常慢。使用不便。
如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。

[TOC]

用到的Gulp插件

Sass安装

环境ubuntu 16.04

  1. sudo apt-get install ruby
  2. sudo gem install sass 国内会报错，如下
    1
    2
    3
    sudo gem install sass
    ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
    Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org/quick/Marshal.4.8/sass-3.4.22.gemspec.rz)

原因是国内和谐gem，解决方法是使用淘宝镜像如下

1
2
3
4
5
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org

重新执行sudo gem install sass

nodejs安装

安装参考nodejs.org
npm访问慢的问题参考npm.taobao.org淘宝镜像

gulp安装

gulp 介绍
gulpjs.com
gulp中文网

gulp 安装参考gulp入门指南
简易步骤：
在项目更目录执行
npm install --save-dev gulp
安装gulp-sass插件,详细说明gulp-sass
npm install gulp-sass

sass 转 css 操作流

示例项目目录结构

1
2
3
4
5
6
7
-node_modules   //node 模块
-scss           //编译前的scss文件
 --test.scss
-css            //编译后的css文件
 --test.css
--gulpfile.js   //gulp任务执行工具配置文件
--index.html

gulpfile.js文件内容

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('scss',function(){
	gulp.src('./scss/*.scss')  //这里是scss文件的目录
		.pipe(sass().on('error',sass.logError))
		.pipe(gulp.dest('./css'));  //这里是编译后css存放的目录
})
gulp.task('default',function(){
	gulp.watch('./scss/*.scss',['scss']);  //在这里执行文件观察任务，发现变化执行上面定义好的 `scss`编译任务。
})

启动：
node_modules/.bin/gulp gulpfile.js
提示

1
2
3
[19:05:18] Using gulpfile ~/test/gulpfile.js
[19:05:18] Starting 'default'...
[19:05:18] Finished 'default' after 20 ms

打开编辑器编辑scss下test.scss文件，保存，查看css下test.css文件，已经编译好了。

css 压缩

安装 npm i gulp-clean-css --save-dev

1
2
3
4
5
6
7
8
var gulp = require('gulp');
var cleanCss = require('gulp-clean-css');
gulp.task('minify-css',function(){
    gulp.src('./css/*.css')
                .pipe(cleanCSS())
                .pipe(gulp.dest('./mincss/'));
    })

使用 gulp minify-css

html 压缩

安装 npm i gulp-htmlmin --save-dev

1
2
3
4
5
6
7
8
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',function(){
    gulp.src('./*.html')
        .pipe(htmlmin({collapseWhitespace:true}))
        .pipe(gulp.dest('./minhtml/'));
    })

使用 gulp htmlmin