This is my first time using Gulp, I am trying to make a gulpfile to minify and merge css and js files, but I have this error when I run the command gulp:
C:\Users\S.Hocine\Desktop\gulpTest>gulp
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\S.Hocine\Desktop\gulpTest\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\S.Hocine\Desktop\gulpTest\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\S.Hocine\Desktop\gulpTest\gulpfile.js:36:6)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at requireOrImport (C:\Users\S.Hocine\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
my gulpfile:
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
// minify and copy html
gulp.task('minifyHtml', function(){
gulp.src('src/*.html')
.pipe(uglify())
.pipe(gulp.dest('dest'));
});
// minify and merge css
gulp.task('minifyMergeCss', function(){
gulp.src('src/css/*.css')
.pipe(concat('merged-min.css'))
.pipe(uglify())
.pipe(gulp.dest('dest/css'));
});
// minify and merge js
gulp.task('minifyMergeJs', function(){
gulp.src('src/js/*.js')
.pipe(concat('merged-min.js'))
.pipe(uglify())
.pipe(gulp.dest('dest/js'));
});
gulp.task('default', ['minifyHtml', 'minifyMergeCss', 'minifyMergeJs']);
gulp.task('watch', function(){
gulp.watch('src/*.html', ['minifyHtml']);
gulp.watch('src/css/*.css', ['minifyMergeCss']);
gulp.watch('src/js/*.js', ['minifyMergeJs']);
});
my gulp version:
CLI version: 2.3.0
Local version: 4.0.2
Where is the problem ?
If you uses the gulp version V3 that contain the different syntax use the latest version of gulp, and also for gulp task modules that you are using into latest version if that doesn't work too use this way,
An example of your function it must be,
gulp.task('default', gulp.series('minifyHtml', 'minifyMergeCss', 'minifyMergeJs'));
Now that'll work fine. This happens because of in gulp v4 the list parameter has been deprecated.
see the more robust example in the gulp documentation for running tasks in series
or you can see the documentation npm
Related
I have a mocha test which tests my code. My code uses another "core" npm package (which uses CommonJS modules). One of "core" the files ("synchronizer.js" file) requires "prefs" modules which is assumed to be provided at some point:
const {Prefs} = require("prefs");
In the mocha test i'd like to implement this "prefs" module, so i've created "prefs.mjs" file (with exports that "synchronizer.js" expects). However during the test i have the following error:
Error: Cannot find module 'prefs'
Require stack:
- /Users/developer/Documents/dev/src/project/node_modules/core/lib/synchronizer.js
- /Users/developer/Documents/dev/src/project/node_modules/core/lib/index.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
at Module._load (node:internal/modules/cjs/loader:872:27)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/Users/developer/Documents/dev/src/project/node_modules/core/lib/synchronizer.js:26:17)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/Users/developer/Documents/dev/src/project/node_modules/core/lib/index.js:33:24)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
My project structure:
\sdk
\test
\unit
\ prefs
\prefs.mjs
\test.js
I run the tests (package.json):
"dependencies": {
...
"core": "^0.10.1",
...
},
"scripts": {
...
"unittest": "mocha --recursive ./test/unit/*.js",
...
}
}
test.js looks as follows:
describe("Section1", function() {
beforeEach(async function() {
await configureTestEnv();
// TODO: set "prefs" module
// TODO: set "io" module
// TODO: set "info" module
});
describe("subscriptions", function() {
it("throws if no condition is achieved", async function() {
...
I can run the tests (which does not include "core") successfully, so the testing works in general.
I suspect i have to use smth like webpack or babel, but i'd like to keep it clean and not using any deps or intermediate build steps if possible.
Should i pass modules directories paths to mocha to let node.js somehow find it?
Ended up using webpack and generating a module with aliased modules including prefs.
I am using Mocha to test code exported as AMD module. Running mocha test gives me following error.
ReferenceError: define is not defined
at Object.<anonymous> (/home/malintha/projects/...../xxx.js:1:63)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
The source which is tested as floows
define(['lodash', 'log', './yyy'], function(_, log, YYY) {
var xxxy = function() {
};
..............
});
And the mocha test
var expect = require("chai").expect;
var sourceGenVisitor = require("../../xxx")
describe("", function() {
describe("", function() {
it("Checks generated source", function() {
...................
});
});
});
How can I fix this issue ?
You can use amd-loader. I used it for years in a project of mine that was structured as a collection of AMD modules. Install with:
`npm install amd-loader`
It then needs to be loaded before any AMD module. In general:
require("amd-loader");
For Mocha you can use the argument --require amd-loader. You can put it in your test/mocha.opts file if you don't want to have to remember typing it over and over.
If you run mocha test with the typescript. Maybe you do this:
Install amd-loader:
npm install amd-loader --save
Run mocha test:
mocha src/**/*test.ts --require ts-node/register -r amd-loader
I'm getting this odd error as the title.
The full message looks like this
$ gulp browserify [01:21:03] Using gulpfile F:\CSC
Assignments\FinalProject\HotelProject\gulpfile.js [01:21:03] Starting
'browserify'... [01:21:03] 'browserify' errored after 15 ms [01:21:03]
ReferenceError: source is not defined
at Gulp. (F:\CSC Assignments\FinalProject\HotelProject\gulpfile.js:109:15)
at module.exports (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (F:\CSC Assignments\FinalProject\HotelProject\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\LUCKYLAM\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
I'm new to this and after having spent a couple of hours figuring out what's causing the problem I have no idea what is wrong around here. Please help.
Here is my /app/js/script.js
require('angular');
var app = angular.module('app', []);
gulpfile.js:
gulp.task('browserify', function() {
return browserify('./app/js/script.js')
.bundle()
.pipe(source('main.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./dist/js/kk/'));
});
My folder structure
I guess you are missing one npm package: vinyl-source-stream.
Try to install it with npm install vinyl-source-stream --save-dev and require in your gulpfile.js like so:
var source = require('vinyl-source-stream');
I have a problem with gulp-concat. I'm trying to concate all my js files in a single file, let's say, dist/app.js.
But there is something that I don't understand. In that file, my required files path are still the same than before...
Here is my gulpfile.js :
var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");
var resolveDependencies = require("gulp-resolve-dependencies");
gulp.task("default", function () {
return gulp.src("client/**/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat("app.js"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("dist/js"));
});
As you can see, I want to concat nested folders.
Take a look for example at the top of my /client/components/app.js :
import React, {PropTypes} from 'react';
import AppLeftNav from './AppLeftNav';
import {AppCanvas, AppBar, Styles} from 'material-ui';
//Code here
So in my app app.js generated by gulp, i can see :
var _AppLeftNav = require('./AppLeftNav');
It's a relative path and it can't work.
So, what's the tricks to handle theses required files with relative path ?
Thanks a lot.
EDIT : See the error I get :
Error: Cannot find module './components/App.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (MyFolder\dist\js\app.js:34:24)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
To anyone who might have the same problem. Babel currently doesn't support imports inlining #1681, neither do gulp-concat, as it's just concatenating files.
I opted to use Rollup to propertly resolve dependencies and only then transpile output:
var gulp = require('gulp');
var gutil = require('gulp-util');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var rollup = require('gulp-rollup');
gulp.task('build', function () {
return gulp.src('src/parser-factory.js', { read: false })
.pipe(rollup({ external: ['request', 'cheerio'] }))
.on('error', gutil.log)
.pipe(babel({ stage: 0 }))
.pipe(concat('realty-parser.js'))
.pipe(gulp.dest('lib'));
});
If you want to get it all in a single file then you will have to write .pipe(gulp.dest("dist/js/jsfile.js")); where jsfile is the name of your file.
I have created this gulp task for watchifying but it gives this error: Cannot read property 'cache' of undefined
gulp.task('browserify-With-Watch', function () {
"use strict";
var bundler = browserify({
entries: ['src/js/ede-wrapper.js'], // Only need initial file, browserify finds the deps
debug: true, // Gives us sourcemapping
cache: {},
packageCache: {},
fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('src/js/ede-wrapper.js'))
// This is where you add uglifying etc.
.pipe(gulp.dest('dist'));
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('src/js/ede-wrapper.js'))
.pipe(gulp.dest('dist'));
});
This is the error i get
[17:06:04] Starting 'browserify-With-Watch'...
[17:06:04] 'browserify-With-Watch' errored after 1.6 ms
[17:06:04] TypeError: Cannot read property 'cache' of undefined
at watchify (d:\KHOBI\Source\ede_js_sdk\node_modules\watchify\index.js:13:27)
at Gulp.<anonymous> (d:\KHOBI\Source\ede_js_sdk\gulpfile.js:55:20)
at module.exports (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\hasithm\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
Hope this is not something wrong with the watchify version that I use
Note: I have used gulp-browserify to browserify
Note: I have used gulp-browserify to browserify
You should use browserify directly here, not gulp-browserify.
watchify expects a browserify instance but you're giving it a stream created by gulp-browserify.