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 正确生成