Gulp 没有将 sass 编译为 css

问题描述

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

吞咽观察

gulp scss-for-prod

gulp scripts-for-prod

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

解决方法

已解决：添加一个干净的 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',];
 
    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,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'],'*'])
        .pipe(gulp.dest(paths.distprod));
});

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