We Keep Coding

I'm getting error in node using gulp and gulp-livereload

i downloaded livereload extension but it's not working, here's the error.
Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
var
gulp = require("gulp"),
livereload = require("gulp-livereload");
gulp.task("reload-css", function() {
gulp.src('./src/*.css')
.pipe(livereload());
});
gulp.task("default", function() {
livereload.listen();
gulp.watch('./src/*.css', ['reload-css']);
});
So what should i do now ?

it looks like you're using gulp 4, but write gulp 3 syntax. Try
gulp.watch('./src/*.css', gulp.series('reload-css'))
Check out the gulp 4 docs.
This post highlight the differences in the new gulp.

Fail compile Sass with gulp

I have a problem with my code. it will not compile when I write "Gulp sass" in the console, But nothing happened in my CSS folder. I have been sitting for a long time trying to make it work but it won't want to work for me and I am very grateful if anyone can help me with this
Here is the code:
var gulp = require('gulp');
var sass = require('gulp-sass');
// Compile
gulp.task('sass', function() {
return gulp.src('./src/Assests/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/Assets/css'));
});`
and in the console it says
gulp sass
[10:41:41] Using gulpfile ~\my-app\gulpfile.js
[10:41:41] Starting 'sass'...
[10:41:41] Finished 'sass' after 8.78 ms`

Change your code to log errors sass().on('error', sass.logError)
You task:
gulp.task('sass', function() {
return gulp.src('./src/Assests/scss/*.scss')
.pipe(sass()
.on('error', sass.logError)
)
.pipe(gulp.dest('./src/Assets/css'));
});

please make sure the name of the folder is correct. Looks like you have 'Assests' instead of 'Assets'. Note the extra 's'

Gulp TypeError: dest.on is not a function

I'm trying to generate a bundle.js file with a Gulp task
var gulp = require('gulp'),
gutil = require('gulp-util'),
wrench = require('wrench'),
conf = require('./webpack.config'),
webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server');
// Webpack
gulp.task('wp', function() {
return gulp.src('./assets/scripts/entry.js')
.pipe(webpack(conf))
.pipe(gulp.dest('./assets/build1'));
});
However, I get TypeError: dest.on is not a function when I try to run it:
Here's the folder directory:

The error occurs because webpack doesn't work natively with gulp streams. Naturally the returned object by webpack() doesn't include dest.on which is specific to gulp.
Either use gulp-webpack or follow the official docs on how to use webpack with gulp
Sample code taken straight out of the official docs which uses webpack-stream:
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});

How to set up Gulp to process the same task on different folder?

I need to run some gulp task on two different folder only.
Example of my project folder structure:
- Project
- componentA
- componentB
- componentC
- componentD
I need to perform tasks in componentA and componentB and not in C/D.
At the moment I am using the following script.
Could you please tell me how to add the task for B?
Do you know any alternative/better approach?
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
// JS hint task
gulp.task('jshint', function () {
gulp.src('./componentA/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

The below uses a match to exclude C and D directly
(note I'm using concat for testing)
var gulp = require('gulp');
var concat = require('gulp-concat');
var files = './component!(C|D)/*.txt';
gulp.task('test', function(){
gulp.src(files)
.pipe(concat('all.txt'))
.pipe(gulp.dest('./'));
});
Which for you would be
'./component!(C|D)/**/*.js'

I was able to solve this issue using the following code.
Any better way or alternative approaches are welcome.
// include plug-ins
var jshint = require('gulp-jshint');
var folders = [
'./componentA/**/*.js',
'./componentB/**/*.js'
];
// JS hint task
gulp.task('jshint', function () {
gulp.src(folders)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

Concatenating files with Gulp

Im new to using Gulp. I'm trying to concatenate my JavaScript files into a single file. Currently, I have the following:
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var input = {
js: './src/**/*.js'
};
var output = {
js: './dist/myJavaScript.min.js'
}
gulp.task('default', ['clean', 'bundle-js']);
gulp.task('clean', function(callback) {
});
gulp.task('bundle-js', function() {
gulp.src(input.js)
.pipe(concat(output.js))
.pipe(uglify())
;
});
When I run this, myJavaScript.min.js never gets generated. I ran gulp --verbose and I do not see any files being input. However, my directory structure looks like this:
/
/src
/childDirectory
file2.js
file1.js
gulpfile.js
package.json
Based on my understanding, the expression I used for input.js should get file1.js and file2.js. What am I doing wrong?

You should give
file name inside concat function, you should not give it as a path name
add return before including source.
add destination
try the following code,
gulp.task('bundle-js', function() {
return gulp.src(input.js)
.pipe(concat('myJavaScript.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});

You are missing your destination folder.
gulp-concat-link
.pipe(gulp.dest('folderPathHere'));