when running default task (sequence of 3 tasks sass then RTL then minify ) gulp gives exception with throw this error Unknown word
I use gulp 3 with gulp-sass, gulp-RTL, gulp-uglify
when running default task I get an exception and tried many things but no result
Error
de_modules\postcss\lib\lazy-result.js:248
if (this.error) throw this.error;
^
CssSyntaxError: <css input>:4363:3: Unknown word
at Input.error (..\node_modules\postcss\lib\input.js:119:22)
at Parser.unknownWord (..\node_modules\postcss\lib\parser.js:506:26)
at Parser.other (..\node_modules\postcss\lib\parser.js:171:18)
at Parser.parse (..\node_modules\postcss\lib\parser.js:84:26)
at parse (..\node_modules\postcss\lib\parse.js:24:16)
at new LazyResult (..\node_modules\postcss\lib\lazy-result.js:70:24)
at Processor.process (..\node_modules\postcss\lib\processor.js:117:12)
at DestroyableTransform._transform (..\node_modules\gulp-rtlcss\index.js:26:47)
at DestroyableTransform.Transform._read (..\node_modules\readable-stream\lib\_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (..\node_modules\readable-stream\lib\_stream_transform.js:172:83)
guplfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require("gulp-minify-css");
var uglify = require("gulp-uglify");
var rtlcss = require("gulp-rtlcss");
var runSeq = require('run-sequence');
var gulpIf = require('gulp-if');
gulp.task('sass_plugins', function () {
var tasks = [];
tasks.push(sass_plugins());
return tasks;
});
gulp.task('minify_plugins', function () {
// minify
var tasks = [];
tasks.push(minify_plugins());
return tasks;
});
gulp.task('rtl_plugins', function () {
var tasks = [];
tasks.push(rtl_plugins());
return tasks;
});
var sass_plugins = function () {
var tasks = [];
// bootstrap compilation
tasks.push(
gulp
.src('./assets/src/sass/bootstrap.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/dist/global/plugins/bootstrap/css'))
);
// select2 compilation using bootstrap variables
tasks.push(gulp
.src('./assets/plugins/select2/sass/select2-bootstrap.min.scss')
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(gulp.dest('./assets/dist/global/plugins/select2/css'))
);
return tasks;
};
var minify_plugins = function () {
// css minify plugins
var tasks = [];
tasks.push(gulp
.src(['./assets/dist/global/plugins/bootstrap/css/*.css', '!./assets/dist/global/plugins/bootstrap/css/*.min.css'])
.pipe(minifyCss())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/dist/global/plugins/bootstrap/css')));
tasks.push(gulp
.src(['./assets/dist/global/plugins/select2/css/*.css', '!./assets/dist/global/plugins/select2/css/*.min.css'])
.pipe(minifyCss())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/dist/global/plugins/select2/css')));
return tasks;
};
gulp.task('default', function (cb) {
runSeq('sass_plugins', 'rtl_plugins', 'minify_plugins', cb);
});
i want to make default task to run the 3 tasks, please help
when run each task seperatly it run fines
Related
I'm working on an old project which is using Gulp.
I had to update gulp v3 to v4 and this is how it looks like:
var gulp = require('gulp')
var sass = require('gulp-sass')
var sourcemaps = require('gulp-sourcemaps')
var browserSync = require('browser-sync').create()
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var notify = require('gulp-notify')
var series = require('stream-series') // Helps to concat js files in desired order
// BrowserSync task
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
})
// Style task
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(concat('style.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Styles task complete' }))
})
// Script task
gulp.task('script', function () {
return series(
gulp.src('./src/js/vendor/**/*.js'),
gulp.src('./src/js/modules/**/*.js')
)
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./js'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Script task complete' }))
})
// watch task
gulp.task('watch', gulp.series('sass', 'script', 'browserSync'), function () {
gulp.watch('./src/sass/**/*.scss', ['sass'])
gulp.watch('./src/js/**/*.js', ['script'])
gulp.watch('./index.html', browserSync.reload)
})
If I run gulp watch it compiles all sass and JS files and shows the page in browser correctly.
But after that it doesn't watch anymore and if I change any sass or JS files, those changes are not applied.
What is wrong with my gulp script?
I managed to fix it myself.
const gulp = require('gulp')
const sass = require('gulp-sass')
const sourcemaps = require('gulp-sourcemaps')
const browserSync = require('browser-sync').create()
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const notify = require('gulp-notify')
const series = require('stream-series') // Helps to concat js files in desired order
// HTML task
function html () {
return gulp.src('./*.html')
.pipe(gulp.dest('./build'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'HTML task complete' }))
}
// Style task
function style () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(concat('style.min.css'))
// .pipe(cssmin())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Styles task complete' }))
}
// Script task
function script () {
// return gulp.src('./src/js/**/*.js')
return series( // concats js files in desired order
gulp.src('./src/js/vendor/**/*.js'),
gulp.src('./src/js/modules/**/*.js')
)
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Script task complete' }))
}
function watch () {
html()
style()
script()
browserSync.init({
server: {
baseDir: './build'
}
})
gulp.watch('./*.html', html).on('change', browserSync.reload)
gulp.watch('./src/sass/**/*.scss', style).on('change', browserSync.reload)
gulp.watch('./src/js/**/*.js', script).on('change', browserSync.reload)
}
exports.html = html
exports.style = style
exports.script = script
exports.watch = watch
please let me know if you have any suggestion to improve my solution.
While running gulp sass
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
/* Setup scss path */
var paths = {
scss: './assets/sass/*.scss'
};
/* Sass task */
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss'].concat(neat)
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
I get error " ReferenceError: neat is not defined". Since "neat" is not defined variable. It should be replaced.
Any help is much appreciated.
includePaths: ['scss'].concat(neat)
where did you defined neat variable ??
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
maybe
var neat = require('node-neat').includePaths;
and then
includePaths: ['styles'].concat(neat)
??
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('path/to/input.scss')
.pipe(sass({
// includePaths: require('node-neat').with('other/path', 'another/path')
// - or -
includePaths: require('node-neat').includePaths
}))
.pipe(gulp.dest('path/to/output.css'));
});
the doc on https://github.com/sass/node-sass
say
includePaths
Type: Array<String>
Default: []
An array of paths that LibSass can look in to attempt to resolve your
#import declarations. When using data, it is recommended that you use
this.
so this whould work ??
var path = require('path');
gulp.task('sass', function () {
gulp.src('assets/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: [path.resolve('./assets/sass')]
}))
.pipe(gulp.dest('assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
/* Reload the browser CSS after every change */
.pipe(reload({stream:true}));
});
I use Gulp 4 and get following error in the console ( I tried to upgrade the gulpfile code to gulp 4, but it's still not working):
$ gulp
[13:30:25] Using gulpfile c:\Users\Sylwia Szymańska\Projects\New project\gulpfil
e.js
[13:30:25] Starting 'default'...
[13:30:25] 'default' errored after 2.95 ms
[13:30:25] AssertionError: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\user\Projects\New project\no
de_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\user\Projects\New project\node_modules\un
dertaker\lib\task.js:13:8)
at C:\Users\user\Projects\New project\node_modules\gulp-series\l
ib\gulp-series.js:27:11
at Array.forEach (native)
at C:\Users\user\Projects\New project\node_modules\gulp-series\l
ib\gulp-series.js:23:11
at taskWrapper (C:\Users\user\Projects\New project\node_modules\
undertaker\lib\set-task.js:13:15)
at bound (domain.js:280:14)
at runBound (domain.js:293:12)
at asyncRunner (C:\Users\user\Projects\New project\node_modules\
async-done\index.js:36:18)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
My gulpfile:
var gulp = require('gulp');
var build = require('gulp-build');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var browser_sync = require('browser-sync');
var gulps = require("gulp-series");
var watch = require('gulp-watch');
var less = require('gulp-less');
var livereload = require('gulp-livereload');
gulp.task('stream', function () {
// Endless stream mode
return watch('css/**/*.css', { ignoreInitial: false })
.pipe(gulp.dest('build'));
});
gulp.task('callback', function () {
// Callback mode, useful if any plugin in the pipeline depends on the `end`/`flush` event
return watch('css/**/*.css', function () {
gulp.src('css/**/*.css')
.pipe(gulp.dest('build'));
});
});
gulp.task('build', function() {
gulp.src('scripts/*.js')
.pipe(build({ GA_ID: '123456' }))
.pipe(gulp.dest('dist'))
});
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
//sourcemaps???
var gulp = require('gulp');
// var plugin1 = require('gulp-plugin1');
// var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
// .pipe(plugin1())
// .pipe(plugin2())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
// var less = require('gulp-less'),
// livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
var gulps = require("gulp-series");
gulps.registerTasks({
"test1" : (function(done) {
setTimeout(function() {
console.log("test1 is done");
done();
}, 1000);
}),
"test2" : (function() {
console.log("test2 is done");
})
});
gulps.registerSeries("default", ["test1", "test2"]);
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
I'll be gratefull for help!
I installed all the packages (I hope, so).
In Gulp 4.0 the gulp.watch task does not accept array arguments like ['sass'] anymore.
You can use gulp.series or gulp.parallel to define the tasks to be executed when gulp.watch triggers a change event.
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
The Complete-Ish Guide to Upgrading to Gulp 4 may be useful.
I have a gulpfile with some tasks. All task are combined in a default task, that has dependencies to all others tasks. I want to add a deploy task. The deploy can take a list of files. I want only deploy changed files.
Is there a way to get the pipes of all dependencies? Or any other way, without merge everything into one task?
Here a simple sample to explain:
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
// Here I want only files changed in dist
.pipe(debug());
});
Update:
Here some more of my task:
gulp.task('default', ['js', 'css', 'images', 'templates']);
gulp.task('images', function () {
return gulp.src('./app/images/*')
.pipe(newer('./dist/app/images'))
.pipe(gulp.dest('./dist/app/images'));
gulp.task('templates', function () {
return gulp.src('./app/**/*.html')
.pipe(newer('./dist/app/templates.js'))
.pipe(minifyHTML({ empty: true }))
.pipe(templateCache({ module: 'app' }))
.pipe(uglify())
.pipe(gulp.dest('./dist/app'));
I added a deployed folder, where i keep track of all files that a deployed.
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
.pipe(newer('./deployed'))
.pipe(debug())
.pipe(gulp.dest('./deployed'))
});
I'm a bit stumped with gulp. Based on the docs, in order to get sequential execution, I should be returning the stream from my tasks, so i tried to do the below for my gulpfile. But as best I can tell, there's a race condition. Half the time I get ENOENT, lstat errors, the other half it succeeds, but my deployDir has weird folder names and missing files all over.. Am I missing something? Is there a trick to this?
var gulp = require('gulp'),
filter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
del = require('del'),
inject = require("gulp-inject"),
uglify = require('gulp-uglifyjs');
var config = {
bowerDir: 'src/main/html/bower_components',
cssDir: 'src/main/html/css/lib',
fontsDir: 'src/main/html/fonts/lib',
imgDir: 'src/main/html/img/lib',
jsDir: 'src/main/html/js/lib',
deployDir: 'src/main/resources/html'
};
gulp.task('default', ['clean', 'bowerdeps', 'dev']);
gulp.task('clean', function() {
return del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
]);
});
gulp.task('dev', function() {
return gulp
.src(['src/main/html/**', '!src/main/html/{bower_components,bower_components/**}'])
.pipe(gulp.dest(config.deployDir));
});
gulp.task('bowerdeps', function() {
var mainFiles = mainBowerFiles();
if(!mainFiles.length) return; // No files found
var jsFilter = filterByRegex('.js$');
var cssFilter = filterByRegex('.css$');
var fontFilter = filterByRegex('.eot$|.svg$|.ttf$|.woff$');
return gulp
.src(mainFiles)
.pipe(jsFilter)
.pipe(gulp.dest(config.jsDir))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(gulp.dest(config.cssDir))
.pipe(cssFilter.restore())
.pipe(fontFilter)
.pipe(gulp.dest(config.fontsDir));
});
// Utility Functions
var filterByRegex = function(regex){
return filter(function(file){
return file.path.match(new RegExp(regex));
});
};
Dependencies run always parallel: ['clean', 'bowerdeps', 'dev'].
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
You can use run-sequence for sequencing tasks.
Other thing: del doesn't return a stream. Use callback instead:
gulp.task('clean', function(cb) {
del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
], cb);
});