0

NPM を使用してタスクランナーを作成しています — Gulp や Grunt を使用したくありません...遅い! タスクランナーが動いていて速い！しかし...オートプレフィクサーはプレフィックスを付けていません。持っている console.logs もターミナルに表示されません。解雇されていないようです。autoPrefix()SCSS が CSS にコンパイルされた後に呼び出される関数で呼び出しています。

そのファイルに指示するスクリプト オブジェクト タスクを含む package.json にstart.js は、次のコードがあります。

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 に答える