Why do I get TypeError: _.flattenDeep is not a function when I run a watch task
This is my gulpfile.js :
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
gulp.task('css', function(){
gulp.src('public/sass2/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest('public/css'))
});
gulp.task('default', function() {
gulp.watch('public/sass2/**/*.scss', ['css']);
});
I'm always getting this error when using the watch task, how do I get passed it?
try installing lodash in the project
npm i --save lodash
Related
I am using multiple files with gulp#4 where the main gulpfile.js includes all other files within the ./tasks/ directory. We are using the npm gulp-hub package to include multiple gulpfiles with the ./tasks/ directory. However we are getting the following error message when calling the tasks.
Forward referenced tasks 'clean-minify-js` not defined before use
How can we include multiple gulpfiles within the main gulpfile.js so that we can call tasks?
Current gulpfile.js:
'use strict';
var gulp = require('gulp'),
HubRegistry = require('gulp-hub');
var genericHub = new HubRegistry('./tasks/scripts.js');
gulp.registry(genericHub);
var watchers = function(done) {
gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
done();
}
gulp.task('watch', gulp.series(watchers));
Current ./tasks/scripts.js
'use strict';
var gulp = require('gulp'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify');
gulp.task('clean-scripts', function() {
return gulp.src(dest.js)
.pipe(clean({read:false, force: true});
});
gulp.task('minify-js', gulp.series('clean-scripts', function() {
gulp.src(src.js)
.pipe(uglify())
.pipe(gulp.dest(dest.js));
}));
gulp.task('clean-minify-js', gulp.series('minify-js'));
Folder structure:
some/path/gulpfile.js
some/path/tasks/scripts.js
To resolve the issue, I had to do the following.
Use the require-dir package to include all files within the ./tasks/ directory.
convert tasks that were designed for gulp#3.9.1 into functions for gulp#4
use gulp.series to set the functions to run in the particular order we needed
gulpfile.js
'use strict';
var gulp = require('gulp'),
requireDir = require('require-dir');
requireDir('./tasks/');
var watchers = function(done) {
gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
done();
}
gulp.task('watch', gulp.series(watchers));
./tasks/scripts.js
'use strict';
var gulp = require('gulp'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify');
function cleanScripts() {
return gulp.src(dest.js)
.pipe(clean({read:false, force: true});
}
function minJs() {
return gulp.src(src.js)
.pipe(uglify())
.pipe(gulp.dest(dest.js));
}
gulp.task('clean-minify-js', gulp.series(cleanScripts, minJs));
I want to apply react to my NodeJs
This is my gulpfile:
let gulp = require('gulp');
let uglify = require('gulp-uglify');
let browserify = require('browserify');
let babelify = require('babelify');
let source = require('vinyl-source-stream');
let buffer = require('vinyl-buffer');
let gutil = require('gulp-util');
let sourcemaps = require('gulp-sourcemaps');
let assign = require('lodash.assign');
let watchify = require('watchify');
let customOpts = {
entries : ['./App/app.js'],
extensive : ['.js'],
debug: true
};
let opts = assign({}, watchify.args, customOpts);
let b = watchify(browserify(opts));
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.transform(babelify,babelify.configure())
.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('app.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('dest'));
}
gulp.task('default',['js']);
Then I intput gulp js
D:\weather-app>gulp js
[00:03:47] Using gulpfile D:\weather-app\gulpfile.js
[00:03:47] Starting 'js'...
[00:03:57] 2112196 bytes written (10.56 seconds)
[00:04:27] Finished 'js' after 41 s
The terminal got stuck here, I had to type Ctrl C to stop it.
Strangely, when I opened the index.html, the appearance changed.
So I don't know how could that be.
I want to minify my js files in my /_dev folder then rename them and copy hem to minify-js folder, then concatenate minified files.
I use a gulpfile.js like this:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function() {
return gulp.src('_dev/js/libraries/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('minifiedJS'));
});
gulp.task('concatFiles',['minify-js'],function (){
return gulp.src(['minifiedJS/jquery.jplayer.min.js', 'minifiedJS/jplayer.playlist.min.js', 'minifiedJS/LinkToPlayer.min.js'])
.pipe(concat('final.js'))
.pipe(gulp.dest('_dist/js'));
});
when I run:
gulp concatFiles
minify-js task create the following file in minifiedJSfolder.
jquery.jplayer.min.js
jplayer.playlist.min.js
LinkToPlayer.min.js
but final.js won't create till I run gulp concatFiles command again.
how can i solve this problem?
You may try in one task as following
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function(){
return gulp.src('_dev/js/libraries/*.js')
.pipe(concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('final.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minify-js'], function(){});
I want to do something like this when I run gulp:
1.use "gulp-bower" to install all dependency from bower.json.
2.Use "main-bower-files" to find all bower component and concat them into one file
var gulp = require('gulp');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');
gulp.task('default', function () {
return bower()
.pipe(gulp.src(mainBowerFiles()))
.pipe(concat('lib.js'))
.pipe(gulp.dest('static/lib'));
});
but this will give Error: Bower components directory does not exist first, then download the bower components after.
How can you download the components first then run main-bower-files
gulp-bower runs asynchronously, so it moves along to the next part of the pipe before the files have finished downloading. To solve this, you'll need to separate your tasks:
var gulp = require('gulp');
var bower = require('gulp-bower');
var concat = require('gulp-concat');
var mainBowerFiles = require('main-bower-files');
gulp.task('bower', function () {
return bower();
});
gulp.task('bower-concat', ['bower'], function () {
return gulp.src(mainBowerFiles())
.pipe(concat('lib.js'))
.pipe(gulp.dest('static/lib'));
});
gulp.task('default', ['bower-concat']);
I am currently working on a ReactJS project, so I decided to setup a workflow using Gulp to manage the uglification, minification, JSX transformation and so on.
The problem is that the Browserify API is constantly changing (the documentation is not being updated quite often) we can no longer use options inside bundle()
As it is stated by the log error message : "Move all option arguments to the Browserify() constructor"
But not all the options I am using are available, here is my code for now :
var gulp = require('gulp');
var gutil = require('gulp-util');
var streamify = require('gulp-streamify');
var source = require('vinyl-source-stream');
var del = require('del');
prod = gutil.env.prod;
gulp.task('cleanjs', function(cb) {
del(['build/js'], cb);
});
gulp.task('cleancss', function(cb) {
del(['build/css'], cb);
});
gulp.task('sass', ['cleancss'], function() {
var sass = require('gulp-sass');
var concat = require('gulp-concat');
gulp.src(['./src/**/.{css, scss}'])
.pipe(sass())
.pipe(concat('livemap.min.css'))
.pipe(gulp.dest('./build/css'));
});
gulp.task('watch', function() {
var watchify = require('watchify');
var reactify = require('reactify');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
var bundler = watchify(browserify('./src/main.js', {
cache: {},
packageCache: {},
fullPaths: true,
transform: ['reactify'],
debug: true,
}));
function rebundle() {
var t = Date.now();
gutil.log('Starting Watchify rebundle');
return bundler.bundle()
.pipe(source('bundle.js'))
.pipe(prod ? streamify(uglify()) : gutil.noop())
.pipe(gulp.dest('./build/js'))
.on('end', function () {
gutil.log('Finished bundling after:', gutil.colors.magenta(Date.now() - t + ' ms'));
});
}
bundler.on('update', rebundle);
gulp.watch('./src/**/*.{css, scss', ['sass']);
return rebundle();
});
gulp.task('default', ['watch']);
Any help would be very welcome !
Here's how i do it: https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js
var options = watchify.args;
options.debug = true;
var bundler = browserify(options);
bundler.add("./public/scripts/app.js");
bundler.transform("reactify");
var watcher = watchify(bundler);
.
.
.