续Gulp使用入门编译Sass

Posted 2020-08-09 thomaspha

使用 gulp 编译 Sass

Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。

安装

npm install gulp-sass (--save-dev) 括号中的可选

基本用法

Something like this will compile your Sass files:

‘use strict‘;

var gulp = require(‘gulp‘);
var sass = require(‘gulp-sass‘);

gulp.task(‘sass‘, function () {
return gulp.src(‘./sass/**/*.scss‘)
.pipe(sass().on(‘error‘, sass.logError))
.pipe(gulp.dest(‘./css‘));
});

gulp.task(‘sass:watch‘, function () {
gulp.watch(‘./sass/**/*.scss‘, [‘sass‘]);
});

这里说下sass({outputStyle: ‘compressed‘})方法里面有四种编译输出形式可以配置

• nested 继承
• compact 紧凑
• expanded 展开
• compressed 压缩

:nested

.widget-social {
  text-align: right; }
  .widget-social a,
  .widget-social a:visited {
    padding: 0 3px;
    color: #222222;
    color: rgba(34, 34, 34, 0.77); }
  .widget-social a:hover {
    color: #B00909; }

:expanded

.widget-social {
  text-align: right;
}
.widget-social a,
.widget-social a:visited {
  padding: 0 3px;
  color: #222222;
  color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
  color: #B00909;
}

:compact

.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }

:compressed

.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}

You can also compile synchronously, doing something like this:

‘use strict‘;

var gulp = require(‘gulp‘);
var sass = require(‘gulp-sass‘);

gulp.task(‘sass‘, function () {
return gulp.src(‘./sass/**/*.scss‘)
.pipe(sass.sync().on(‘error‘, sass.logError))
.pipe(gulp.dest(‘./css‘));
});

gulp.task(‘sass:watch‘, function () {
gulp.watch(‘./sass/**/*.scss‘, [‘sass‘]);
});

Options

Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.

For example:

gulp.task(‘sass‘, function () {
return gulp.src(‘./sass/**/*.scss‘)
.pipe(sass({outputStyle: ‘compressed‘}).on(‘error‘, sass.logError))
.pipe(gulp.dest(‘./css‘));
});
Source Maps

gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the Sass to CSS compilation. You will need to initialize gulp-sourcemaps prior to running gulp-sass and write the source maps after.

var sourcemaps = require(‘gulp-sourcemaps‘);

gulp.task(‘sass‘, function () {
return gulp.src(‘./sass/**/*.scss‘)
.pipe(sourcemaps.init())
.pipe(sass().on(‘error‘, sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(‘./css‘));
});
By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a path relative to the gulp.dest() destination in the sourcemaps.write() function.

var sourcemaps = require(‘gulp-sourcemaps‘);
gulp.task(‘sass‘, function () {
return gulp.src(‘./sass/**/*.scss‘)
.pipe(sourcemaps.init())
.pipe(sass().on(‘error‘, sass.logError))
.pipe(sourcemaps.write(‘./maps‘))
.pipe(gulp.dest(‘./css‘));
});

最后运行gulp 命令

gulp
[11:32:24] Using gulpfile D:\wamp\www\BootsDataTable\gulpfile.js
[11:32:24] Starting ‘script‘...
[11:32:24] Finished ‘script‘ after 16 ms
[11:32:24] Starting ‘css‘...
[11:32:24] Finished ‘css‘ after 3.66 ms
[11:32:24] Starting ‘images‘...
[11:32:24] Finished ‘images‘ after 1.9 ms
[11:32:24] Starting ‘sass‘...
[11:32:24] Starting ‘auto‘...
[11:32:25] Finished ‘auto‘ after 58 ms
[11:32:25] Starting ‘css‘...
[11:32:25] Finished ‘css‘ after 4.39 ms
[11:32:25] Finished ‘sass‘ after 318 ms
[11:32:25] Starting ‘default‘...
[11:32:25] Finished ‘default‘ after 22 μs
[11:32:25] Starting ‘css‘...
[11:32:25] Finished ‘css‘ after 1.45 ms
[11:32:25] gulp-imagemin: Minified 20 images (saved 12.48 kB - 24.2%)