Gulp源地图和sass问题
我试图将我所有的样式（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
})
);
创建一个main.scss文件是一种常见的做法，您可以根据需要导入其他样式表。 使用这种技术将帮助您更好地组织您的依赖关系。 例如，如果你有以下结构：
--app/style/
--vendors/
--vendors.scss
--utils/
--utils.css
--base/
--base.scss
--variables.css //here are all my variables
只需在应用程序/样式下创建一个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文件。
通过这种方式，您将获得所需的源映射，请注意，目前，您目前没有通过任何sass任务运行.css文件，因此您无法获取这些文件的源映射。
如果您的项目已经很大，这似乎需要做很多工作，但随着您的应用程序变得更大，这将为您节省很多麻烦。
链接地址: http://www.djcxy.com/p/96237.html