Gulp 源图和 sass 问题

Posted

技术标签:

【中文标题】Gulp 源图和 sass 问题【英文标题】:Gulp sourcemaps and sass issues 【发布时间】:2017-09-23 17:29:11 【问题描述】:

我试图将我所有的样式(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
    )
);

【问题讨论】:

你能发布整个 gulpfile 吗? 为什么需要查看整个 gulpfile? 我想复制并运行整个 gulpfile.js。可能是您导入和初始化 gulp 源映射的方式或运行可能导致问题的任务的方式。对于当前的代码,我唯一可以建议的是将.pipe(sass()) 移动到.pipe(concat('styles.scss')) 上方。 编辑我的问题。你说的是我知道的唯一方法,但我不能这样做,因为我收集了许多基于变量和混合在另一个文件中的 sass 文件。 尝试将所有 .scss 和 .css 文件导入到 main.scss 文件中,并且只将该 main.scss 文件放入 gulpfile。尝试以正确的顺序导入,这样您就可以让所有变量和混合工作。 【参考方案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 文件,因此您不会获得这些文件的源映射。

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

【讨论】:

感谢您的回答!我找到了一个使用 gulp bulksass 导入多个文件的解决方案,现在它可以完美运行了!

以上是关于Gulp 源图和 sass 问题的主要内容,如果未能解决你的问题,请参考以下文章

CSS Sourcemaps 无法使用 gulp、SASS 和 autoprefixer 正确生成

gulp sass 红宝石不工作

如何使用 Gulp 从 SASS/SCSS 中缩小和 Autoprefixer CSS 文件

Gulp 没有运行 gulp-sass

如何使用 Gulp 编译不同目录中的 SASS 文件?

使用 Bower 安装 Gulp-Sass 时出现 ENOTFound 错误