0

我正在使用 NPM 创建一个任务运行程序——我不想使用 Gulp 或 Grunt...slow!。任务运行器正在运行，而且速度很快！但是......自动前缀没有前缀。它拥有的 console.logs 也没有显示在终端中。看起来它没有被解雇。我在autoPrefix()SCSS 编译为 CSS 后调用的函数中调用它。

我有一个带有指向start.js 该文件的脚本对象任务的 package.json 具有以下代码：

var watch = require('node-watch');
var sass = require('node-sass');
var fs = require('fs');
var browserSync = require('browser-sync');
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
var inputFile = 'static/scss/compiler.scss';
var outputFile = 'static/css/site.min.css';

/**
 * BrowserSync
 */

browserSync({
    server: "./",
    files: ["./*.html", "static/css/*", "static/js/*"],
    logLevel: "silent",
    notify: false
});


/* AUTOPREFIXER NOT WORKING! */

var autoPrefix = function() {
    postcss([ autoprefixer ]).process({
        from: outputFile,
        to: outputFile
    }).then(function (result) {
        result.warnings().forEach(function (warn) {
            console.warn(warn.toString());
        });
        console.log(result.css);
    });
}


/**
 * Sass Compiler
 */

var compileSass = function(file) {

    sass.render({
        file: inputFile,
        outputStyle: 'compressed'
    }, function(error, result) {
        if (!error) {
            /* Write new file */
            fs.writeFile(outputFile, result.css, function(err) {
                if (!err) {
                    if (file) {
                        autoPrefix();
                        console.log('', '\x1b[34m', 'Done compiling SCSS, after a change in:', '\x1b[0m' + file);
                        console.timeEnd('Speed');
                        console.log('\n');
                    } else {
                        autoPrefix();
                        console.log('  Here we go! Compiling: ' + inputFile + '\n \n' + 'OK done! I\'m watching! ' + '\n');
                    }
                } else {
                    console.log('Hmm something went wrong.. ' + err);
                }
            });
        } else {
            console.log('', '\x1b[31m', 'Error in file: ', '\x1b[0m' + error.file + ' on line: ' + error.line + '\n' + error.message + '\n');
        }
    });
}
compileSass();


/**
 * Watch
 */
watch('static/scss/', function(filename) {
    var file = filename;
    compileSass(file);
    console.time('Speed');
});

我究竟做错了什么？我正在像这里的示例一样对其进行编码： https ://github.com/postcss/autoprefixer#javascript

4

1 回答 1

0

固定的。我不得不将 SASS 编译结果推送到 PostCSS，然后前缀是。

代码在这里：

var watch = require('node-watch');
var sass = require('node-sass');
var fs = require('fs');
var browserSync = require('browser-sync');
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
var inputFile = 'static/scss/compiler.scss';
var outputFile = 'static/css/site.min.css';
/**
 * BrowserSync, set folders to watch
 * Do not set SCSS folder
 */
browserSync({
    server: "./",
    files: ["./*.html", "static/css/*", "static/js/*"],
    logLevel: "silent",
    notify: false
});

/**
 * Sass Compiler
 */
var compileSass = function(file) {

    sass.render({
        file: inputFile,
        outputStyle: 'compressed'
    }, function(error, result) {

        postcss([ autoprefixer ]).process(result.css).then(function (result) {
            result.warnings().forEach(function (warn) {
                console.warn(warn.toString());
            });

            if (!error) {
                /* Write new file */
                fs.writeFile(outputFile, result.css, function(err) {
                    if (!err) {
                        if (file) {
                            console.log('', '\x1b[34m', 'Done compiling SCSS, after a change in:', '\x1b[0m' + file);
                            console.timeEnd('Speed');
                            console.log('\n');
                        } else {
                            console.log('  Here we go! Compiling: ' + inputFile + '\n \n' + 'OK done! I\'m watching! ' + '\n');
                        }
                    } else {
                        console.log('Hmm something went wrong.. ' + err);
                    }
                });
            } else {
                console.log('', '\x1b[31m', 'Error in file: ', '\x1b[0m' + error.file + ' on line: ' + error.line + '\n' + error.message + '\n');
            }
        });
    });
}
compileSass();

/**
 * Watch
 * On each watch, compile SCSS and start timer
 */
watch('static/scss/', function(filename) {
    var file = filename;
    compileSass(file);
    console.time('Speed');
});
于 2016-08-09T19:57:07.400 回答