Gulpfile.jsリクエスト

Question

私はautoprefixer、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

最後に、私は@Unamata SanataraiとしてES6-約束ですべての問題が修正されたが、私は唯一の.scssファイルで、すべてのファイルの変更をしたときがぶ飲みは、ウェブをリロードしませんでした。

さて、このコードで、私のプロジェクト内のすべてのファイルを見るlivereload：

app/**/*.* ... utils/**/*.*は私のプロジェクトのディレクトリです

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

。このコードでは、node_modulesとvendor folder（私の場合）をスキップしますが、必要に応じてそれらを拡張することができます。

Answer 2

は私が前に、このエラーが発生しました。 はあなたのpackage.json

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

とあなたのgulpfile.js内に以下を追加します。実行します。

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

は、あなたがそうのようgulp-postcssと平野autoprefixerを使用することができます

Answer 3

を助ける必要があります。

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']); 
});