css - Gulp sourcemaps 和 sass 问题

Question

我正在尝试将我所有的样式(css、scss)文件合并到一个文件中并进行编译。原因是因为在另一个文件中有基于变量的文件，但现在我无法创建 sourcemap。

我做错了什么？有更好的解决方案吗？

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
);

gulp.task('copy-fonts', () =>
   gulp.src('app/assets/fonts/**/*.{ttf,woff,eof,svg}')
        .pipe(gulp.dest('dist/style/fonts'))
);

gulp.task('copy-images', () =>
   gulp.src('app/assets/img/**/*.{png,jpg,jpeg,svg}')
        .pipe(gulp.dest('dist/img'))
);

gulp.task('copy-index-html', () =>
    gulp.src('app/index.html')
        .pipe(gulp.dest('dist'))
);

gulp.task('components-html', () =>
    gulp.src(['app/components/**/*.html'])
        .pipe(gulp.dest('dist/components'))
);

gulp.task('view-html', () =>
    gulp.src('app/views/**/*.html')
        .pipe(gulp.dest('dist/views'))
);

gulp.task('copy-jsons', () =>
   gulp.src('app/json/**/*.json')
        .pipe(gulp.dest('dist/json'))
);

gulp.task('app-scripts', () =>
    gulp.src(['app/*.js', '!app/app.js'])
        .pipe(addsrc.append([
            'app/services/**/*.js',
            'app/views/**/*.js',
            'app/directives/**/*.js',
            'app/components/**/*.js'
        ]))
        .pipe(addsrc.prepend('app/app.js'))
        .pipe(ngmin())
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('dist/js'))
);

gulp.task('vendor-scripts', () =>
    gulp.src(['app/vendor/angular/*.js', '!app/vendor/angular/angular.js'])
        .pipe(addsrc.prepend('app/vendor/angular/angular.js'))
        .pipe(addsrc.append('app/vendor/*.js'))
        .pipe(uglify())
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('dist/js'))
);

gulp.task('browser-sync', () => 
    browserSync({
        files: 'dist/**/*.css, dist/**/*.js, app/**/*.html',
        port: 8082
    })
);

Answer 1

创建一个 main.scss 文件是一种常见的做法，您可以根据需要从中导入其他样式表。使用此技术将帮助您更好地组织依赖项。例如，如果您具有以下结构:

--app/style/
  --vendors/
    --vendors.scss
  --utils/
    --utils.css
  --base/
    --base.scss
    --variables.css //here are all my variables

只需在 app/styles 下创建一个 main.scss 文件，它将导入所有其他文件:

@import 'base/variables'; //note that the order is important for variables
@import 'vendors/vendors';
@import 'base/base';

现在，您是否注意到我们没有指定文件扩展名？这很重要，因为您需要将 .css 文件更改为 .scss 文件，而且您还需要在所有不是 main.scss 的文件前加上下划线 (_)(阅读更多关于此 here 的信息) ，这样您就可以确保 sass 编译器不会创建一堆 css 文件，并且您唯一的输出将是 main.css 文件。

这样你会得到你需要的源映射，请注意，目前你没有通过任何 sass 任务运行你的 .css 文件，所以你不会得到这些文件的源映射.

如果您的元素已经很大，这似乎需要做很多工作，但随着您的应用越来越大，这会为您省去很多麻烦。