CODEWITHSUNDEEP
javascriptgulpgulp-sass
legomolina
legomolina

Reputation: 1083

Gulpfile.js request

i'm trying to run a gulpfile with autoprefixer, sass and livereload. I spent all evening but I couldn't run them, it exploids everywhere T.T

Could anyone give a tutorial or a gulpfile with these plugins installed?

Thank you so much :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']);
});

error log from terminal:

[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)

Upvotes: 1

Views: 178

Answers (3)

legomolina
legomolina

Reputation: 1083

Finally, I fixed all problems with ES6-Promise as @Unamata Sanatarai said but gulp didn't reload web when I made changes in all files, only in .scss files.

Now with this code, livereload watch all files in my project:

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

Where app/**/*.* ... utils/**/*.* are my project directories. With this code I skip node_modules and vendor folders (in my case), but you can extend them if needed.

Upvotes: 0

t1m0n
t1m0n

Reputation: 3431

You can use plain autoprefixer with gulp-postcss like so:

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

Upvotes: 0

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

I had this error before. Add the following to your package.json

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

and in your gulpfile.js do:

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

should help

Upvotes: 2

Related Questions