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.
Related
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
I have total followed the instructions of https://browsersync.io/docs/gulp
my gulpfile.js code:
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;
gulp.task('server', ['css'], function() {
browserSync.init({
server: {
baseDir: './dist'
}
});
gulp.watch('src/sass/*.scss', ['css']);
gulp.watch("dist/*.html").on('change', reload);
gulp.watch("dist/sass/*.css").on('change', reload);
});
// 编译Sass
gulp.task('css', function() { // 任务名
return gulp.src('src/sass/a.scss') // 目标 sass 文件
.pipe(sass()) // sass -> css
.pipe(gulp.dest('dist/sass/')) // 目标目录
// .pipe(reload({stream: true}))
.pipe(browserSync.stream());
});
gulp.task('default', ['server']);
when I update the sass file, it seems that the css file will be updated immediately, but the broswer cannot reload.
and the command line show:
It seem that the cli cannot connect to the broswer?
===
The problem is solved,my html file does not have a body tag,see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582
I post you my GULP FILE ... as you can see i use the
gulp-webserver
it only need to put reload:true to work as you aspect:
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
htmlmin = require("gulp-htmlmin"),
uglify = require("gulp-uglify"),
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json"); // make sure bundleconfig.json doesn't contain any comments
var livereload = require('gulp-livereload');
var changed = require('gulp-changed');
var stripDebug = require('gulp-strip-debug');
var minifyHTML = require('gulp-minify-html');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');
var ngAnnotate = require('gulp-ng-annotate');
var templateCache = require('gulp-angular-templatecache');
var webserver = require('gulp-webserver'); //<-- YOU HAVE TO INSTALL IT MAYBE WITH NPM (npm install --save -dev gulp-webserver)
// THESE IS THE TASK FOR WEB SERVER AND RELOAD
gulp.task('webserver', function () {
gulp.src('')
.pipe(webserver({
host: 'localhost', // <-- IF YOU PUT YOUR IP .. YOU CAN WATCH IT FROM OTHER devices
port: 80,
livereload: true,
directoryListing: true,
open: true,
fallback: 'index-dev.html'
}));
});
// Task to process Index page with different include ile based on enviroment
gulp.task('html-dev', function () {
return gulp.src('Index.html')
.pipe(preprocess({ context: { NODE_ENV: 'dev', DEBUG: true } })) //To set environment variables in-line
.pipe(rename({ suffix: '-dev' }))
.pipe(gulp.dest(''));
});
// Task to process Index page with different include ile based on enviroment
gulp.task('html-prod', function () {
return gulp.src('Index.html')
.pipe(preprocess({ context: { NODE_ENV: 'prod', DEBUG: false } })) //To set environment variables in-line
.pipe(rename({ suffix: '-prod' }))
.pipe(gulp.dest(''));
});
// CSS concat, auto-prefix, minify, then rename output file
gulp.task('minify-css', function () {
var cssPath = { cssSrc: ['./app/view/assets/content/css/styles-default.css', './app/view/assets/content/css/styles-theme-1.css', './app/view/assets/content/css/styles-theme-2.css', '!*.min.css', '!/**/*.min.css'], cssDest: './app_build/content_build/css' };
return gulp.src(cssPath.cssSrc)
// .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app_build/content_build/css/*.css -r']))
// .pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(cssPath.cssDest));
});
// Lint Task
gulp.task('lint', function () {
var jsPath = { jsSrc: ['./app/app.js', './app/controller/*.js', './app/view/utils/directives/*.js', './app/model/services/*.js'] };
return gulp.src(jsPath.jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./app/view/assets/content/css/*.scss'], cssDest: './app/view/assets/content/css'
};
gulp.src(sassPath.cssSrc)
.pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app/view/assets/content/css/*.css -r']))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
gulp.task('cache', function () {
return gulp.src('./app/view/template/**/*.html')
.pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/template' }))
.pipe(gulp.dest('./app/view/template'))
.pipe(livereload());
});
gulp.task('cache-directives', function () {
return gulp.src('./app/view/utils/directives/template/**/*.html')
.pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/utils/directives/template' }))
.pipe(gulp.dest('./app/view/utils/directives/template'))
.pipe(livereload());
});
gulp.task("min:js", function () {
var tasks = getBundles(".js").map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(ngAnnotate({
remove: true,
add: true,
single_quotes: false
}))
.pipe(concat(bundle.outputFileName))
.pipe(uglify())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
//gulp.task("min:css", function () {
// var tasks = getBundles(".css").map(function (bundle) {
// return gulp.src(bundle.inputFiles, { base: "." })
// .pipe(concat(bundle.outputFileName))
// .pipe(cssmin())
// .pipe(gulp.dest("."));
// });
// return merge(tasks);
//});
gulp.task("min:html", function () {
var tasks = getBundles(".html").map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
.pipe(gulp.dest("."));
//.pipe(livereload());
});
return merge(tasks);
});
gulp.task("clean", function () {
var files = bundleconfig.map(function (bundle) {
return bundle.outputFileName;
});
return del(files);
});
gulp.task("min", ["clean", "min:js", "minify-css", 'html-dev', "cache", "cache-directives"]);
gulp.task("default", ["watch", "webserver"]);
gulp.task("watch", function () {
livereload.listen();
// watch for JS error
gulp.watch(['./app/app.js', './app/controllers/*.js', './app/directives/*.js', './app/services/*.js'], ['lint']);
// min js
getBundles(".js").forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:js"]);
});
//watch for SASS changes
gulp.watch('./app/view/assets/content/css/scss/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/scss/settings/*.scss', ['sass']);
gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/base/*.scss', ['sass']);
gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/modules/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/Hover-master/scss/*.scss', ['sass']);
//gulp.watch('./app/view/assets/content/css/*.css', ['minify-css']);
//watch for PREPROCCESS x PROD
gulp.watch('Index.html', ['html-prod']);
//watch for PREPROCCESS x DEV
gulp.watch('Index.html', ['html-dev']);
//watch for TEMPLATE CACHE
gulp.watch('./app/view/template/**/*.html', ['cache']);
gulp.watch('./app/view/utils/directives/template/**/*.html', ['cache-directives']);
});
function getBundles(extension) {
return bundleconfig.filter(function (bundle) {
return new RegExp(extension).test(bundle.outputFileName);
});
}
The problem is solved,my html file does not have a body tag,see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582
I'm working with a small project using gulp and I want to learn about vue.js, so I want to use vue.js in this project, but I don't know how to configure vue.js in the gulpfile.js
I want to know how to configure gulpfile to use vue.js
My gulpfile.js
var env = require('minimist')(process.argv.slice(2)),
gulp = require('gulp'),
gutil = require('gulp-util'),
plumber = require('gulp-plumber'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpif = require('gulp-if'),
stylus = require('gulp-stylus'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
modRewrite = require('connect-modrewrite'),
imagemin = require('gulp-imagemin'),
karma = require('gulp-karma'),
cache = require('gulp-cache'),
rsync = require('rsyncwrapper').rsync;
// Call Jade for compile Templates
gulp.task('jade', function () {
return gulp.src('src/templates/*.jade')
.pipe(plumber())
.pipe(jade({pretty: !env.p}))
.pipe(gulp.dest('build/'));
});
gulp.task('copy', function() {
return gulp.src(['src/*.html', 'src/*.txt'])
.pipe(gulp.dest('build/'))
});
// Call Uglify and Concat JS
gulp.task('js', function () {
return gulp.src('src/js/**/*.js')
.pipe(plumber())
.pipe(concat('main.js'))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Uglify and Concat JS
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({debug: !env.p}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Stylus
gulp.task('stylus', function () {
gulp.src('src/styl/main.styl')
.pipe(plumber())
.pipe(stylus({
use:[koutoSwiss(), prefixer(), jeet(), rupture()],
compress: env.p,
}))
.pipe(gulp.dest('build/css'));
});
// Call Imagemin
gulp.task('imagemin', function () {
return gulp.src('src/img/**/*')
.pipe(plumber())
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
.pipe(gulp.dest('build/img'));
});
// Call Watch
gulp.task('watch', function () {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', [(env.fy) ? 'browserify' : 'js']);
gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
});
gulp.task('browser-sync', function () {
var files = [
'build/**/*.html',
'build/css/**/*.css',
'build/img/**/*',
'build/js/**/*.js',
];
browserSync.init(files, {
server: {
baseDir: './build/',
},
});
});
// Rsync
gulp.task('deploy', function () {
rsync({
ssh: true,
src: './build/',
dest: 'user#hostname:/path/to/www',
recursive: true,
syncDest: true,
args: ['--verbose'],
},
function (erro, stdout, stderr, cmd) {
gutil.log(stdout);
});
});
// Default task
gulp.task('default', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'watch', 'browser-sync']);
// Build and Deploy
gulp.task('build', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'deploy']);
Vueify is a browserify transform; gulp-browserify isn't maintained anymore but I assume that you can still add vueify as a transform once it's installed:
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({
debug: !env.p,
transform: ['vueify']
}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
Check this out:
This is a package which lets you setup gulp task for vue.js.
https://www.npmjs.com/package/gulp-vueify
Using:
.pipe(babel({presets: ['es2015']}))
On a normal gulp task helped me concat and uglify my vue.js files.
If this is what you meant, then you will also need to install babel with npm and add:
var babel = require('gulp-babel');
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'))
});
what's wrong with this code:
var gulp = require('gulp');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
//lint
module.exports = gulp.task('lint', function () {
return gulp.src([config.paths.src.scripts,config.paths.exclude.bower])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
//watch
module.exports = gulp.task('watch', function () {
watch(config.paths.src.scripts, ['lint'])
.pipe(connect.reload());
watch(config.paths.src.templates, ['templates'])
.pipe(connect.reload());
watch(config.paths.src.index)
.pipe(connect.reload());
});
when ie I edit a js file doing an error
jshint show me nothing.
This works:
watch(config.paths.src.scripts)
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(connect.reload());
but it's quite the same or not ?
gulp-watch does not support an array of task names like the internal gulp.watch. See documentation at https://www.npmjs.org/package/gulp-watch
You have to provide gulp-watch a function, something like
watch(config.paths.src.scripts, function(events, done) {
gulp.start(['lint'], done);
}
Note: It seems that gulp.start will be deprecated in Gulp 4.x, it will be replaced by a task runner called bach: https://github.com/floatdrop/gulp-watch/issues/92