gulp sass 源码图答案

【问题标题】：gulp sass source mapgulp sass 源码图
【发布时间】：2016-11-21 03:04:54
【问题描述】：

我需要帮助将源映射添加到同一个 CSS 输出文件夹中的 SASS 编译器。到目前为止，我必须在 gulpfile.js 中安装 gulp-sourcemaps 模块，但无法知道将 sourcemaps.write 绑定为 gulp.task 是否成功。

非常感谢任何帮助:)

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
});

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.php").on('change', bs.reload);
});

【问题讨论】：

标签： node.js sass gulp gulp-sass

【解决方案1】：

为 gulp 任务 'sass' 尝试此代码：

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

首先 init sourcemaps 然后编译 sass() 之后将 sourcemap 写入同一文件夹 ('.')

问候

【讨论】：

【解决方案2】：

我从 5 个月以来每天都在使用这个任务并且工作正常，

const gulp            = require('gulp'),
      autoprefixer    = require('gulp-autoprefixer'),
      plumber         = require('gulp-plumber'),
      sass            = require('gulp-sass'),
      sourcemaps      = require('gulp-sourcemaps');

var sassSourcePath = 'YourPath/scss/**/*.scss',
    cssDestPath    = 'YourPath/css/';


gulp.task('sass', () => {

  return gulp
    .src(sassSourcePath)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(cssDestPath));

});

还推荐你require('gulp-csso') 用于生产版本

【讨论】：

在sourcemaps.write() 中添加{includeContent: false} 后我的工作。你能解释一下那是什么吗？
您好@weber，如果我没记错的话（旧帖子）默认路径是/source/，您必须设置includeContent: false 以使自定义路径成为可能。更多信息请查看官方文档github.com/gulp-sourcemaps/gulp-sourcemaps

【解决方案3】：

gulp-sass，map，count all files，minify的完整解决方案：

./sass/partial_folders/index.scss

@import 'base/_reset';
@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'base/_typography';
etc..

./gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});


gulp.task('default', function(){
    gulp.watch('sass/**/*.scss', ['styles']);
})

【讨论】：