Gulp Sass v4 не создает файл CSS - PullRequest
Новая
       79

Gulp Sass v4 не создает файл CSS

0 голосов
/ 06 октября 2019

Я использую gulp версии 4 в своем проекте и хочу скомпилировать файл scss в файл css. Но глоток не создает никакого файла CSS.

Мой gulpfile.js 

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const browserSync = require('browser-sync').create();
var replace = require('gulp-replace');


// File paths
const files = { 
    scssPath: './assets/scss/**/*.scss',
    jsPath: './assets/js/**/*.js'
}

// Sass task: compiles the style.scss file into style.css
function scssTask(cb){    
    return src(files.scssPath)
        .pipe(sourcemaps.init()) // initialize sourcemaps first
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError)) // compile SCSS to CSS
        .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
        .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
        .pipe(dest('./dist'))
        .pipe(browserSync.stream());
     // put final CSS in dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
    return src([
        files.jsPath
        //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
        ])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('./dist')
    );
}

// Cachebust
var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
        .pipe(dest('.'));
}

// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
    watch([files.scssPath, files.jsPath], 
        parallel(scssTask, jsTask));    
}

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
    parallel(scssTask, jsTask), 
    cacheBustTask,
    watchTask
);

Мой проект Hiererchy 

myProject
     |_ assets
     |    |_ css
     |    |_ scss
     |    |_ js
     |_ index.html
     |_ node_modules
     |_ gulpfile.js
     |_ package.json

и при запуске Gulp

[14:27:33] Using gulpfile F:\blog-project\infonites\gulpfile.js
[14:27:33] Starting 'default'...
[14:27:33] Starting 'scssTask'...
[14:27:33] Starting 'jsTask'...
[14:27:33] Finished 'scssTask' after 64 ms
[14:27:37] Finished 'jsTask' after 4.36 s
[14:27:37] Starting 'cacheBustTask'...
[14:27:37] Finished 'cacheBustTask' after 7.71 ms
[14:27:37] Starting 'watchTask'...

И после запуска gulp моя иерархия проектов 

myProject
     |_ assets
     |    |_ css
     |    |_ scss
     |    |_ js
     |_ index.html
     |_ dist
     |    |_ all.js
     |_ node_modules
     |_ gulpfile.js
     |_ package.json

Это мой окончательный вывод после запуска задачи gulp. Я не понимаю, почему gulp запускает задачу js, а не задачу css.

...