Gulp 没有将 sass 编译为 css

Question

当我使用以下任何命令时，我无法将编写的 sass 代码编译成 CSS：

一饮而尽

gulp scss-for-prod

gulp scripts-for-prod

奇怪的是，当我进行更改时，叉子会捡起来

Answer 1

已解决：添加一个干净的 package.json 文件

这是 Gulp.js

// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var terser = require('gulp-terser');
//var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var imagemin = require('gulp-imagemin');
var ignore = require('gulp-ignore');
var rimraf = require('gulp-rimraf');
var clone = require('gulp-clone');
var merge = require('gulp-merge');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
var del = require('del');
var cleanCSS = require('gulp-clean-css');
var gulpSequence = require('gulp-sequence');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
//var babel = require('gulp-babel');
var webpack = require('webpack-stream');

//var haml = require('gulp-haml');

// Configuration file to keep your code DRY
var cfg = require('./gulpconfig.json');
var paths = cfg.paths;

// Run:
// gulp sass + cssnano + rename
// Prepare the min.css for production (with 2 pipes to be sure that "theme.css" == "theme.min.css")
gulp.task('scss-for-prod', function () {
    var source = gulp.src(paths.sass + '/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sass());

    var pipeoutput = source.pipe(clone())
        //.pipe(minifycss())
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(paths.css));
    return pipeoutput;
});

// Run:
// gulp sourcemaps + sass + reload(browserSync)
// Prepare the child-theme.css for the development environment
gulp.task('scss-for-dev', function () {
    gulp.src(paths.sass + '/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sass())
        .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
        .pipe(gulp.dest(paths.css));
});

gulp.task('watch-scss', ['browser-sync'], function () {
    gulp.watch(paths.sass + '/**/*.scss', ['scss-for-dev']);
});

// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task('sass', function () {
    var stream = gulp.src(paths.sass + '/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sass({ errLogToConsole: true }))
        .pipe(autoprefixer('last 2 versions'))
        .pipe(gulp.dest(paths.css));

    return stream;
});

// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('watch', function () {
    gulp.watch(paths.haml + '/**/*.haml', ['convert-haml']);
    gulp.watch(paths.sass + '/**/*.scss', ['styles']);
    gulp.watch([paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js', '!js/theme.min.js'], ['scripts']);

    //Inside the watch task.
    gulp.watch(paths.imgsrc + '/**', ['imagemin-watch']);

    //browserSync.reload();
});

/**
 * Ensures the 'imagemin' task is complete before reloading browsers
 * @verbose
 */
gulp.task('imagemin-watch', ['imagemin'], function (done) {
    browserSync.reload();
    done();
});

// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function () {
    gulp.src(paths.imgsrc + '/**')
        .pipe(imagemin())
        .pipe(gulp.dest(paths.img));
});

// Run:
// gulp cssnano
// Minifies CSS files
gulp.task('cssnano', function () {
    return gulp.src(paths.css + '/theme.css')
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssnano({ discardComments: { removeAll: true } }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.css));
});

gulp.task('minifycss', function () {
    return gulp.src(paths.css + '/theme.css')
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(cleanCSS({ compatibility: '*' }))
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.css));
});

gulp.task('cleancss', function () {
    return gulp.src(paths.css + '/*.min.css', { read: false }) // Much faster
        .pipe(ignore('theme.css'))
        .pipe(rimraf());
});


//gulp.task( 'convert-haml', function( callback ) {
//    gulp.src('./haml/**/*.haml')
//    .pipe(haml({ext: '.php'}))
//    .pipe(gulp.dest('./'));
//} );


gulp.task('styles', function (callback) {
    //gulpSequence('sass', 'minifycss')(callback);
    gulpSequence('sass', 'cleancss')(callback);
});

// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task('browser-sync', function () {
    browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions);
});

// Run:
// gulp watch-bs
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('watch-bs', ['browser-sync', 'watch', 'scripts'], function () {
    
});

// gulp scripts.
// Uglifies and concat all JS files into one
gulp.task('scripts', function () {
    var scripts = [
        //paths.dev + '/js/paginate.js',
        //paths.dev + "/js/Select2.js",
        paths.dev + "/js/slick/slick.js",
        paths.dev + '/js/main.js',
        
    ];

    gulp.src(scripts)
        //.pipe(babel())
        .pipe(webpack({ 
            mode: 'development'
        }))
        .pipe(concat('theme.js'))
        .pipe(gulp.dest(paths.js));
 
}); 

gulp.task('scripts-for-prod', function () {
    var scripts = [
        //paths.dev + '/js/paginate.js',
        //paths.dev + "/js/Select2.js",
        paths.dev + "/js/slick/slick.js",
        paths.dev + '/js/main.js',
    ];
 
    gulp.src(scripts)
        //.pipe(babel())
        .pipe(webpack({
            mode: 'development'
        }))
        .pipe(concat('theme.min.js'))
        //.pipe( uglify().on('error', function(e){
        //        console.log(e);
        //     }) )
        /*.pipe(terser().on('error', function(e){
                   console.log(e);
                 }) )*/   
        .pipe(gulp.dest(paths.js));

}); 

// Deleting any file inside the /src folder
gulp.task('clean-source', function () {
    return del(['src/**/*']);
});

// Run:
// gulp copy-assets.
// Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update

////////////////// All Bootstrap SASS  Assets /////////////////////////
gulp.task('copy-assets', function () {

    // Tachyons CSS

    //var stream = gulp.src( paths.node + 'tachyons-sass/tachyons.scss' )
    //.pipe( gulp.dest( paths.dev + '/sass/tachyons-sass' ) );

    var stream = gulp.src(paths.node + 'normalize-scss/sass/**/*')
        .pipe(gulp.dest(paths.dev + '/sass/normalize-scss'));


    //gulp.src( paths.node + 'tachyons-sass/scss/*.scss' )
    //.pipe( gulp.dest( paths.dev + '/sass/tachyons-sass/scss' ) );


    // Flexbox Grid

    //gulp.src( paths.node + 'flexboxgrid-sass/flexboxgrid.scss' )
    //.pipe( gulp.dest( paths.dev + '/sass/flexboxgrid-sass' ) );

    //gulp.src( paths.node + 'sass-flex-mixin/**/*' )
    //.pipe( gulp.dest( paths.dev + '/sass/sass-flex-mixin' ) );


    gulp.src(paths.node + '@drewbot/sass-flexbox-grid/public/sass-flexbox/scss/**/*')
        .pipe(gulp.dest(paths.dev + '/sass/sass-flexbox-grid'));



    ////////////////// All Bootstrap 4 Assets /////////////////////////
    // Copy all JS files
    //var stream = gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
    //    .pipe( gulp.dest( paths.dev + '/js/bootstrap4' ) );

    // Copy all Bootstrap SCSS files
    //gulp.src( paths.node + 'bootstrap/scss/**/*.scss' )
    //    .pipe( gulp.dest( paths.dev + '/sass/bootstrap4' ) );

    ////////////////// End Bootstrap 4 Assets /////////////////////////

    gulp
        .src(paths.node + "slick-carousel-latest/slick/slick.js")
        .pipe(gulp.dest(paths.dev + "/js/utils/slick"));

    gulp
        .src(paths.node + "slick-carousel-latest/slick/*")
        .pipe(gulp.dest(paths.dev + "/sass/slick"));

    gulp
        .src(paths.node + "slick-carousel-latest/slick/fonts/*")
        .pipe(gulp.dest(paths.css + "/fonts"));
    


   //gulp.src(paths.node + 'vanillajs-datepicker/dist/**/*')
    //    .pipe(gulp.dest(paths.dev + '/js/utils/vanillajs-datepicker'));

 
    gulp.src(paths.node + 'js-datepicker/src/**/*')
        .pipe(gulp.dest(paths.dev + '/js/utils/js-datepicker'));

        gulp.src(paths.node + 'js-datepicker/dist/**/*')
        .pipe(gulp.dest(paths.dev + '/js/utils/js-datepicker'));

    // Copy Sass Mq

    gulp.src(paths.node + 'sass-mq/_mq.scss')
        .pipe(gulp.dest(paths.dev + '/sass/sass-mq'));

    // Copy all Font Awesome Fonts
    gulp.src(paths.node + '@fortawesome/fontawesome-free/**/*.{ttf,woff,woff2,eot,svg}')
        .pipe(gulp.dest('./fonts/fortawesome'));
    
    // Copy all Font Awesome SCSS files
    gulp.src(paths.node + '@fortawesome/fontawesome-free/scss/**/*.scss')
        .pipe(gulp.dest(paths.dev + '/sass/fortawesome'));

    return stream;
});

// Deleting the files distributed by the copy-assets task
gulp.task('clean-vendor-assets', function () {
    return del([
        paths.dev + '/js/vanillajs-datepicker/**',
        paths.dev + '/sass/sass-flex-mixin/**',
        paths.dev + '/sass/flexboxgrid-sass/**',
        './fonts/*wesome*.{ttf,woff,woff2,eot,svg}',
        paths.dev + '/sass/fortawesome/**',
        paths.dev + "/js/utils/slick/**",
        paths.dev + "/sass/slick/**",
        paths.fonts + "/slick/**",
        paths.vendor !== '' ? (paths.js + paths.vendor + '/**') : ''
    ]);
});
 
// Run
// gulp dist
// Copies the files to the /dist folder for distribution as simple theme
gulp.task('dist', ['clean-dist'], function () {
    return gulp.src(['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore', '!codesniffer.ruleset.xml', '*'], { 'buffer': false })
        //.pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
        .pipe(replace('/js/main.js', '/js' + paths.vendor + '/main.js', { 'skipBinary': true }))
        .pipe(gulp.dest(paths.dist));
});

// Deleting any file inside the /dist folder
gulp.task('clean-dist', function () {
    return del([paths.dist + '/**']);
});

// Run
// gulp dist-product
// Copies the files to the /dist-prod folder for distribution as theme with all assets
gulp.task('dist-product', ['clean-dist-product'], function () {
    return gulp.src(['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '*'])
        .pipe(gulp.dest(paths.distprod));
});

// Deleting any file inside the /dist-product folder
gulp.task('clean-dist-product', function () {
    return del([paths.distprod + '/**']);
});