微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么 Gulp 运行没有错误,但没有编译 SCSS 脚本?

如何解决为什么 Gulp 运行没有错误,但没有编译 SCSS 脚本?

我设置了我的 Gulpfile,到目前为止它看起来不错。我没有错误了。他编译的时候看起来有点太快了。但如果他真的愿意做这份工作,这不会有任何问题。但是当我运行我的 gulp css 任务时,它没有将我的 SCSS 文件编译成 CSS,也没有在之后创建缩小的、连接的构建文件。我检查了路径并在互联网上搜索解决方案,但这并没有进一步帮助我。 我没有错误。那他为什么不做这份工作呢?我在 gulpfile 中犯了一个错误吗?我用于运行任务异步函数以避免错误。但它似乎只是让错误消失,但它不起作用。有人知道我需要改变什么吗?

这就是我的控制台在运行 gulp css 后所做的:

[08:58:02] Using gulpfile C:\xampp\htdocs\united-in-faith\gulpfile.js                                                                                                                                                                                                                                                
[08:58:02] Starting 'css'...                                                                                                                                                                                                                                                                                         
[08:58:02] Finished 'css' after 3.71 ms  

那是我的 gulpfile:

const { src,dest,watch,task,series,parallel } = require('gulp');

var sass = require('gulp-sass');
var minifyCss = require('gulp-clean-css');

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var minifyPHP = require('gulp-PHP-minify');
var sourcemaps = require('gulp-sourcemaps');

var scssOrigin = './scripts/scss/**/_*.scss';
var jsOrigin = './scripts/js/*.js';
var cssFilePath = './scripts/css/**/_*.css';
var jsDestination = './build/scripts/js';
var cssDestination = './scripts/scripts/css';
var cssDestinationMin = './build/scripts/css';
var jsDestinationMin = './build/scripts/js';
var PHPDestination = './build';
var htmlDestination = './build';
var appCssMin = 'app.min.css';
var appJsMin = 'app.min.js';
var appJs = 'app.js';
var appCss = 'app.css';
var watchJs = './scripts/js/**/_*.js';
var watchCss = './scripts/scss/**/_*.scss';



function js(done) {
    src(jsOrigin)
        .pipe(concat({ path: appJsMin}))
        .pipe(uglify())
        .pipe(dest(jsDestinationMin));
    done();
}


function css(done) {
    var processors = [
            autoprefixer,];

    src(scssOrigin,{ sourcemaps: true})
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
        .pipe(sourcemaps.write('./maps'))
        .pipe(postcss(processors))
        .pipe(dest(cssDestination));
    src('scripts/scss/main.scss',{ sourcemaps: true})
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
        .pipe(dest('scripts/css'));
    done();
}

function minifyCss (done) {
    return src(cssFilePath,{ sourcemaps: true})
        .pipe(sourcemaps.init())
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(concat(appCssMin))
        .pipe(sourcemaps.write('./maps'))
        .pipe(dest(cssDestinationMin));
}

/*function cssNoMin (done) {
    var processors = [
            autoprefixer,sass.logError))
        .pipe(postcss(processors))
        .pipe(dest(cssFilePath));
    src(cssFilePath,{ sourcemaps: true})
        .pipe(concat(appCss))
        .pipe(dest(scssDestinationMin))
        .pipe(browserSync.stream());
    done();
}
*/
function jsNoMin (done) {
    src(jsOrigin)
        .pipe(concat({ path: appJs }))
        .pipe(dest(jsDestinationMin))
        .pipe(browserSync.stream());
    done();

}

function browserSyncServer (done) {
    browserSync.init({      
        open: false,injectChanges: true,server: { //server variable set elsewhere
            baseDir: './',proxy: "https://localhost/united-in-faith",port: 8080,online: true  
        },ui: {
            port: 8082
        }
    });

    done();
}

function browserSyncReload (done) {
    browserSync.reload();

    done();
}


function publishPHP () {
    return src('sites/**/*PHP')
        .pipe(dest(PHPDestination));
        src('sites/**/*html')
        .pipe(dest(PHPDestination));
}

function watch_files () {
    watch('*.PHP',browserSyncReload);
    watch([watchJs,watchCss],series(css,minifyCss,js,browserSyncReload))
    .on('error',function (err) {
        console.log(err.toString());
        this.emit('end');
    });
}

function watchNoMin () {
    watch('*.PHP',jsNoMin,function (err) {
        console.log(err.toString());
        this.emit('end');
    });
}


task("default",async function() {
    series(css,browserSyncServer);
});

task("css",browserSyncServer);
});

task("js",async function() {
    series(js,browserSyncServer);
});

task("publish",publishPHP,browserSyncServer);
});

task("watch",series(watch_files,browserSyncServer));
task("watch-no-min",series(watchNoMin,browserSyncServer));
task("all",parallel(css,js));
task("css-no-min",css);
task("js-no-min",js);

这是我对 Package.json 的依赖

"dependencies": {
    "lodash": "^4.17.21","@fortawesome/fontawesome-pro": "^6.0.0-beta1","bootstrap": "^5.0.1","bootstrap-icons": "^1.5.0","ckeditor4": "^4.16.1","cookieconsent": "^3.1.1","emojione": "^4.5.0","gulp-PHP-minify": "^0.1.3","jquery": "^3.6.0","jquery-ui": "^1.12.1","jquery-ui-touch-punch": "^0.2.3"
    
},"devDependencies": {
    "q": "^1.5.1","autoprefixer": "^10.2.6","browser-sync": "^2.26.14","chokidar": "^3.5.2","debug": "^4.3.1","gulp": "^4.0.2","gulp-clean-css": "^4.3.0","gulp-cli": "^2.3.0","gulp-concat": "^2.6.1","gulp-postcss": "^9.0.0","gulp-sass": "^4.1.0","gulp-sourcemaps": "^3.0.0","gulp-uglify": "^3.0.2","gulp-watch": "^5.0.1","webpack": "^5.40.0","webpack-cli": "^4.7.2"
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?