I've tried to migrate from gulp v3 to v4, according to my researches, I should change my gulpfile.js file.
So, I tried it like this:
gulp.task('clean-css', function (cb) {
return rimraf(paths.css, cb);
});
to
gulp.task('clean-css', gulp.series(function (cb) {
return rimraf(paths.css, cb);
}));
-----------------------------------------------------------------
gulp.task('clean', ['clean-css', 'clean-fonts', 'clean-js']);
to
gulp.task('clean', gulp.parallel('clean-css', 'clean-fonts', 'clean-js'));
-----------------------------------------------------------------
gulp.task('build-css', ['lint-css'], function () {});
to
gulp.task('build-css', gulp.series('lint-css', function () {}));
but when I write 'gulp build' I get such error
D:\Projects\Exo\exo\src\COG.SRM\node_modules\undertaker\lib\helpers\normalizeArgs.js:20
assert(flattenArgs.length, 'One or more tasks should be combined using series or parallel');
^
AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: One or more tasks should be combined using series or parallel
at normalizeArgs (D:\Projects\Exo\exo\src\COG.SRM\node_modules\undertaker\lib\helpers\normalizeArgs.js:20:3)
at Gulp.series (D:\Projects\Exo\exo\src\COG.SRM\node_modules\undertaker\lib\series.js:13:14)
at Object. (D:\Projects\Exo\exo\src\COG.SRM\gulpfile.js:383:24)
at Module._compile (internal/modules/cjs/loader.js:936:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
at Module.load (internal/modules/cjs/loader.js:790:32)
at Function.Module._load (internal/modules/cjs/loader.js:703:12)
at Module.require (internal/modules/cjs/loader.js:830:19)
at require (internal/modules/cjs/helpers.js:68:18)
at execute (C:\Users\SS\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
Could someone help me, please?
Related
i am new to Gulp and specially Gulp 4. here i have my gulpfile.js
/**
* Welcome to your gulpfile!
* The gulp tasks are splitted in several files in the gulp directory
* because putting all here was really too long
*/
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
/**
* This will load all js or coffee files in the gulp directory
* in order to load all gulp tasks
*/
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file);
});
/**
* Default task clean temporaries directories and launch the
* main optimization build task
*/
gulp.task('default', ['clean'], function () {
gulp.start(['build']);
});
function done() {
}
while trying to run => gulp build i am facing following Exception
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\ahsan\Documents\dev-work\smsvoltapp\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\ahsan\Documents\dev-work\smsvoltapp\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\ahsan\Documents\dev-work\smsvoltapp\gulp\build.js:28:6)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at C:\Users\ahsan\Documents\dev-work\smsvoltapp\gulpfile.js:19:3 {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
It seems the node.js function require at line 19:3 is not upto the mark and valid for gulp4
Gulp version:
CLI version: 2.3.0
Local version: 4.0.2
npm -v => 8.19.2
Please help
I am currently working on migrating gulp from 3.x to 4.x
I am struck while converting gulp.
Below is the gulp.watch code
function isOnlyChange(event) {
return event.type === 'changed';
}
function watch(){
gulp.watch([path.join(conf.paths.src, '/*.html')], ['inject-reload']);
gulp.watch([
path.join(conf.paths.src, '/app/**/*.css'),
path.join(conf.paths.src, '/app/**/*.scss')
], function (event) {
if (isOnlyChange(event)) {
gulp.start('styles-reload');
} else {
gulp.start('inject-reload');
}
});
gulp.watch([path.join(conf.paths.src, '/app/**/*.js'), path.join(conf.paths.src, '/app/**/*.json')], function (event) {
if (isOnlyChange(event)) {
gulp.start('scripts-reload');
} else {
gulp.start('inject-reload');
}
});
gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function (event) {
browserSync.reload(event.path);
});
};
gulp.task('watch', gulp.series(watch));
})();
I am getting the following error
Error: watching src*.html: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
Do I need to add series and parallel for each gulp.watch?
How to migrate this, is there any sample code available for reference.
The error states that the watch task has to be a function, while yours is an array. Change it to:
gulp.watch([path.join(conf.paths.src, '/*.html')], gulp.series('inject-reload'));
For more info, have a look at this question.
I'm trying to make a JSON call with async/await using Cloud Functions for Firebase.
Any idea how to fix the following code? My plan is Blaze.
My inspiration is https://www.valentinog.com/blog/http-requests-node-js-async-await/
DEPLOY ERROR
functions[setDetails]: Deployment error.
const getDetails = async url => {
SyntaxError: Unexpected identifier
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at require (internal/module.js:20:19)
at getUserFunction (/var/tmp/worker/worker.js:378:24)
INDEX.JS
'use strict';
const functions = require('firebase-functions');
const admin = require('firebase-admin');
// Promise based HTTP client for the browser and node.js
const axios = require('axios');
admin.initializeApp(functions.config().firebase);
const url = 'https://api.xxxx.com/json?partnumber=';
const getDetails = async url => {
try {
const response = await axios.get(url);
const data = response.data;
const getDet = data.results[0].details;
return getDet;
} catch (error) {
console.log(error);
return error;
}
};
exports.setDetails = functions.database.ref('/equipment/{pushId}').onWrite((event) => {
const post = event.data.val();
if (post.details){ return };
const number = post.number;
const details = getDetails(url + number);
admin.database().ref('/equipment/{pushId}').push({number: number, details: details});
});
PACKAGE.JSON
{
"name": "look-at-details",
"description": "bla bla bla",
"dependencies": {
"axios": "^0.18.0",
"firebase-admin": "^5.9.1",
"firebase-functions": "^0.8.1"
},
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase experimental:functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
}
}
async/await is not yet supported natively by Cloud Functions. Cloud Functions runs node 6, which doesn't use a version of JavaScript that supports async/await. The deploy is failing because it doesn't know the async keyword.
Instead, you could initialize your project to use TypeScript, which supports async/await. The Firebase CLI will automatically transpile your code to ES6 that uses Promises to implement async/await.
Another solution is rather than using async wait you could use another library called request-promise-any
I'm bundling my script with Browserify + Babel like this:
function buildJs() {
let bopts = {
paths: [
`${SRC}/js`,
'./config'
],
debug: !isProduction
};
let opts = Object.assign({}, watchify.args, bopts);
let b = watchify(persistify(opts));
b.add(`${SRC}/js/index.js`)
.on('update', bundle)
.on('log', gutil.log)
.external(vendors)
.transform(babelify, {
presets: ["es2015", "react"],
plugins: [
"syntax-async-functions",
"transform-regenerator",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-rest-spread",
"transform-react-jsx-source",
staticFs
]
})
.transform(browserifyCss, { global: true });
function bundle() {
let stream = b.bundle()
.on('error', swallowError)
.on('end', () => {
gutil.log(`Building JS:bundle done.`);
})
.pipe(source('bundle.js'))
.pipe(streamify(uglify()));
return stream.pipe(gulp.dest(`${DIST}/js`));
}
return bundle();
}
It's just browserify -> babelify -> browserify-css -> uglify -> gulp.dest.
But If I ran this task, it fails with:
[17:00:30] Using gulpfile ~/ctc-web/gulpfile.js
[17:00:30] Starting 'build'...
[17:00:46] 1368516 bytes written (16.43 seconds)
[17:00:46] Building JS:bundle done.
events.js:160
throw er; // Unhandled 'error' event
^
GulpUglifyError: unable to minify JavaScript
at createError (/home/devbfex/ctc-web/node_modules/gulp-uglify/lib/create-error.js:6:14)
at wrapper (/home/devbfex/ctc-web/node_modules/lodash/_createHybrid.js:87:15)
at trycatch (/home/devbfex/ctc-web/node_modules/gulp-uglify/minifier.js:26:12)
at DestroyableTransform.minify [as _transform] (/home/devbfex/ctc-web/node_modules/gulp-uglify/minifier.js:79:19)
at DestroyableTransform.Transform._read (/home/devbfex/ctc-web/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/home/devbfex/ctc-web/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/home/devbfex/ctc-web/node_modules/readable-stream/lib/_stream_writable.js:338:64)
at writeOrBuffer (/home/devbfex/ctc-web/node_modules/readable-stream/lib/_stream_writable.js:327:5)
at DestroyableTransform.Writable.write (/home/devbfex/ctc-web/node_modules/readable-stream/lib/_stream_writable.js:264:11)
at Transform.ondata (_stream_readable.js:555:20)
Just skip uglify works, but I really need it.
The weird thing is that error was occured after end event. I tried using with vinyl-buffer, but same errors happen.
I couldn't find any solution, every my attemps fails with same error message.
What am I missing? Is there a something that I missed?
Try to replace let by var and see what happens.
I would like to compile the LESS file into normal CSS then add it to the /build folder but I'm getting an error:
(function (exports, require, module, __filename, __dirname) { body {
^
SyntaxError: Unexpected token {
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:528:28)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/charisse/react/wanderlust/webpack.config.js:3:12)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
I understand the error is coming from the LESS file, but I don't know how to solve it?
body {
background: yellow;
}
I've followed tutorials and webpack.config.js seems to be pretty much built the same way:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var Less = require('./app/css/styles.less');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
inject: 'body'
});
var ExtractTextPluginConfig = new ExtractTextPlugin('./build/styles.css');
module.exports = {
entry: './app/js/index.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.less$/,
exclude: /(node_modules)/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer!less-loader')
}
]
},
plugins: [ HtmlWebpackPluginConfig, ExtractTextPluginConfig]
}
Also is there any difference between loaders implemented like 'style-loader', 'css-loader' and style-loader!css-loader?
Is it also possible to just inject the compiled LESS file into the index.html that's inside the /build folder?
Because you are importing the less file, webpack cannot interpret it so it fails.
In short you don't need this bit:
var Less = require('./app/css/styles.less');
To answer your question about the string syntax vs the array there isn't much of a difference you can omit the -loader bit all together webpack is smart enough to add that on for you.
the second question you asked about, you are already doing with the html-webpack-plugin.
In your index.js (entry file) you need to require the less file so it can run through the loader like so
var css = require('../css/styles.less');
I have taken the liberty in refactoring your webpack.config
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Less = require('./app/css/styles.less');
module.exports = {
entry: './app/js/index.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.less$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style', 'css!less')
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './app/index.html',
inject: 'body'
}),
new ExtractTextPlugin('./styles.css')
]
}