गुलप स्रोत स्रोत और एसएएस मुद्दे

Question

मैं अपनी सभी शैलियों (सीएसएस, एसएसएस) फ़ाइलों को एक फ़ाइल में विलय करने और संकलित करने की कोशिश कर रहा हूं। कारण यह है क्योंकि ऐसी फाइलें हैं जो किसी अन्य फ़ाइल में चर पर आधारित होती हैं, लेकिन अब मैं एक स्रोतमैप नहीं बना सकता।

मैं क्या गलत कर रहा हूं? क्या कोई बेहतर समाधान है?

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 के बारे में और पढ़ें), यह जिस तरह से आप सुनिश्चित करते हैं कि सैस कंपाइलर सीएसएस फाइलों का समूह नहीं बनाता है और आपका एकमात्र आउटपुट main.css फ़ाइल होगा।

इस तरह आपको स्रोत स्रोतों की आवश्यकता होगी, इस बात पर ध्यान दें कि वर्तमान में, आप इस समय किसी भी सैस कार्य के माध्यम से .css फ़ाइलों को नहीं चला रहे हैं, इसलिए आपको इन फ़ाइलों के लिए स्रोतमैप नहीं मिलेगा।

ऐसा लगता है कि आपकी परियोजना पहले से ही बड़ी है, लेकिन यह आपके काम को बड़ा होने के कारण बहुत परेशानी बचाएगा।