Gulp源图和sass问题

Question

我试图将我的所有样式(css,scss)文件合并到一个文件中并进行编译.原因是因为存在基于另一个文件中的变量的文件,但现在我无法创建源图.

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

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 的文件前面添加下划线 (_)（在此处阅读有关此内容的更多信息），这确保 sass 编译器不会创建一堆 css 文件的方式，并且您唯一的输出将是该main.css文件。

这样您将获得所需的源映射，请注意，目前您没有.css通过任何 sass 任务运行文件，因此您将无法获得这些文件的源映射。

如果您的项目已经很大，这似乎需要做很多工作，但是随着您的应用程序变得越来越大，这将为您省去很多麻烦。