续Gulp使用入门编译Sass-白红宇

续Gulp使用入门编译Sass

阅读量：7207 次

发布时间：2019-06-29

本文共 3951 字，大约阅读时间需要 13 分钟。

使用 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'...