Gulpfile.js 要求

Question

我正在尝试运行一个带有自动前缀、sass 和 livereload 的 gulpfile。我花了整个晚上，但我不能运行他们，到处都是爆炸 T.T

任何人都可以提供安装这些插件的教程或 gulpfile 吗？

非常感谢你:D

gulpfile.js

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
    gulp.src('public_html/style/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('css'))
        .pipe(livereload());
});

gulp.task('watch', function () {
    livereload.listen(35729);
    gulp.watch('public_html/style/scss/**/*.scss', ['sass']);
});

来自终端的错误日志：

[22:46:02] Using gulpfile /var/www/satbalma/Gulpfile.js
[22:46:02] Starting 'watch'...
[22:46:03] Finished 'watch' after 357 ms
[22:48:43] Starting 'sass'...
[22:48:43] Finished 'sass' after 22 ms

/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:157
    this.processing = new Promise(function (resolve, reject) {
                          ^
ReferenceError: Promise is not defined
at LazyResult.async (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:157:31)
at LazyResult.then (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:79:21)
at DestroyableTransform._transform (/var/www/satbalma/node_modules/gulp-autoprefixer/index.js:24:6)
at DestroyableTransform.Transform._read (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
at writeOrBuffer (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
at DestroyableTransform.Writable.write (/var/www/satbalma/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
at DestroyableTransform.ondata (/var/www/satbalma/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
at DestroyableTransform.emit (events.js:95:17)

Answer 1

我之前遇到过这个错误。将以下内容添加到您的 package.json

"es6-promise": "~3.1.2",
"es6-promise-polyfill": "~1.2.0",

并在您的 gulpfile.js 中执行：

var Promise      = require('es6-promise').Promise;

应该有帮助

Answer 2

您可以像这样将 autoprefixer 与 gulp-postcss 一起使用：

npm i --save-dev gulp-postcss autoprefixer

gulpfile.js

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions'] });

gulp.task('sass', function () {
    gulp.src('public_html/style/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([autoprefixer]))
        .pipe(gulp.dest('css'))
        .pipe(livereload());
});

gulp.task('watch', function () {
    livereload.listen(35729);
    gulp.watch('public_html/style/scss/**/*.scss', ['sass']);
});

Answer 3

最后，我修复了 ES6-Promise 的所有问题，如 @Unamata Sanatarai 所说，但是 gulp 在我更改所有文件时没有重新加载网络, 仅在 .scss 文件中。

现在使用此代码，livereload 可以查看我项目中的所有文件：

gulp.watch(['app/**/*.*', 'public_html/**/*.*', 'utils/**/*.*']).on('change', function(file) {livereload.changed(file.path);});

其中 app/**/*.* ... utils/**/*.* 是我的项目目录。使用此代码，我跳过 node_modules 和供应商文件夹（在我的例子中），但如果需要，您可以扩展它们。

Gulpfile.js 要求

Gulpfile.js request

javascript

gulp

gulp-sass