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 

只需創建下的應用程序/風格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文件，因此您無法獲取這些文件的源映射。

如果您的項目已經很大，似乎需要做很多工作，但隨着您的應用變得更大，這將爲您節省很多麻煩。