Gulp and babel are extremely slow - gulp

I'm having issues with gulp and to a greater extent, babel, running extremely slow. It literally takes 2-4 minutes to process 3 javascript files. Even when I just run gulp it seems to take at least 10 seconds to start up, not sure why.
Here are the relevent parts of my gulpfile.js...
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var jshint = require('gulp-jshint');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var babel = require("gulp-babel");
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
gulp.task('scripts', function() {
return gulp.src([
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.mediaQuery.js',
'js/owl.carousel.min.js'])
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('plugins.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./js/'));
});
And this is my package.json file...
{
"name": "foundation-sites-template",
"version": "1.0.0",
"description": "Basic template for a new Foundation for Sites project.",
"main": "gulpfile.js",
"devDependencies": {
"babel-plugin-transform-es2015-arrow-functions": "^6.7.7",
"babel-plugin-transform-es2015-block-scoped-functions": "^6.6.5",
"babel-plugin-transform-es2015-block-scoping": "^6.7.1",
"babel-plugin-transform-es2015-classes": "^6.7.7",
"babel-plugin-transform-es2015-destructuring": "^6.6.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.7.7",
"babel-plugin-transform-es2015-parameters": "^6.7.0",
"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
"babel-plugin-transform-es2015-spread": "^6.6.5",
"babel-plugin-transform-es2015-template-literals": "^6.6.5",
"babel-preset-es2015": "^6.6.0",
"babel-register": "^6.7.2",
"browser-sync": "^2.12.5",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.0",
"gulp-load-plugins": "^1.1.0",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-uglify": "^1.5.3",
"jshint": "^2.9.2"
},
"scripts": {
"start": "gulp",
"build": "gulp sass"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-sites-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation#zurb.com"
},
"author": "ZURB <foundation#zurb.com>",
"license": "MIT",
"private": true,
"dependencies": {
"gulp-autoprefixer": "^3.1.0"
}
}
After running gulp scripts it take 4 minutes!...
[15:41:47] Using gulpfile /Applications/MAMP/htdocs/example/wp-content/themes/example/gulpfile.js
[15:41:47] Starting 'scripts'...
[15:43:55] Finished 'scripts' after 4.13 min
Any ideas why this is so slow? I'm fairly new to npm and gulp so I'm not really sure what to do. I have another Foundation project set up on my home computer and it compiles js almost instantly. So I definitely have something screwed up on this machine.

Related

SyntaxError: Cannot use import statement outside a module in gulp

hi i will try to learn gulp but at start i have an error in my simple hello world. can anybody help me?
my gulp version is:
CLI version 3.9.0
Local version 4.0.2
my .babelrc file :
{
"presets": [ "#babel/preset-env" ]
}
my gulpfile.babel.js file :
export const hello = (done) => {
console.log('hello');
done();
}
my package.json file :
"name": "meatheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"bundle": "gulp bundle --prod"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/register": "^7.12.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.13",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-wp-pot": "^2.5.0",
"gulp-zip": "^5.0.2",
"sass": "^1.43.4",
"vinyl-named": "^1.1.0",
"webpack-stream": "^5.2.1",
"yargs": "^15.4.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1",
"slick-carousel": "^1.8.1"
}
}
and when i run gulp hello is see this in terminal.
[16:47:07] Failed to load external module babel-core/register
[16:47:07] Failed to load external module babel/register
/home/mehdi/Work/Meacodes/Mea template/mea0.1/gulpfile.babel.js:16
import gulp from 'gulp';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
at module. Exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
do you know where is my issue?
I was advised to write "type": "module" to file package.json to the very end of the file
since node otherwise does not consider js files as ES modules, outside of which you still cannot use the import statement)
(in the browser we do modules through the type attribute of the script tag)

'import' and 'export' may appear only with 'sourceType: module'

I've got the following gulpfile.js:
var gulp = require('gulp'),
babelify = require('babelify'),
browserify = require('browserify'),
envify = require('envify/custom'),
eslint = require('gulp-eslint'),
stylelint = require('gulp-stylelint'),
vueify = require('vueify');
var vueCompile = function (app) {
var b = browserify({
entries: 'Views/Ui/src/' + app + '/main.js',
debug: true,
paths: ['./node_modules', './node_modules/globalize/dist'],
transform: [babelify, vueify]
});
return b.transform(
{ global: true }, // Required in order to process node_modules files
envify({ NODE_ENV: process.env.NODE_ENV })
)
.bundle()
// .pipe(source('ui.js'))
// .pipe(buffer())
// .pipe(process.env.NODE_ENV === 'production' ? uglify() : buffer())
// .pipe(gulp.dest('Views/Ui/js/' + app))
};
gulp.task('vue', function () {
return vueCompile('ui');
});
and the following package.json dependencies:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.13.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.13.0",
"babel-runtime": "^6.26.0",
"babelify": "7.3.0",
"browserify": "^16.2.2",
"dateformat": "^1.0.12",
"envify": "^4.1.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.0.11",
"gulp-debug": "3.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.9",
"gulp-zip": "^3.2.0",
"merge-stream": "^1.0.1",
"node-sass": "^3.13.1",
"run-sequence": "^2.1.0",
"sassify": "^2.0.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.5.16",
"vue-resource": "1.5.1",
"vueify": "^9.4.0",
"vuex": "^2.0.0"
},
"dependencies": {
"acorn": "^6.0.4",
"cldr-core": "^33.0.0",
"cldr-dates-full": "^33.0.0",
"cldr-numbers-full": "^33.0.0",
"devextreme": "18.2.3",
"devextreme-vue": "18.2.3",
"eslint": "^3.18.0",
"eslint-plugin-vue": "beta",
"globalize": "^1.3.0",
"gulp-eslint": "^4.0.0",
"gulp-phpcs": "^2.2.0",
"gulp-stylelint": "^4.0.0",
"quill": "^1.3.6",
"stylelint": "^8.0.0",
"stylelint-config-recommended": "^1.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-processor-html": "^1.0.0",
"v-hotkey": "^0.2.3",
"vinyl-source-stream": "^1.1.0"
}
Since I'm trying to minimize my example it may be that there are a few dependencies which are not necessary for the example.
My main.js starts with the following line of code:
import App from './components/App.vue'
If I'm going to run the gulp task vue it ends in the following output:
[10:57:57] Using gulpfile ...\gulpfile.js
[10:57:57] Starting 'vue'...
[10:57:57] 'vue' errored after 68 ms
[10:57:57] Error:
...\Ui\src\akte\main.js:1
import App from './components/App.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
As I can say, babelify doesn't seem to run successfully, because the exception will be thrown when the .bundle() method will be called.
Am I missing something basic?
I've found the answer by myself. So just in case someone has the same problem, here is my solution:
The .babelrc file was missing, so something went wrong while transforming the code.
My file has the following content:
{
"presets": [
"env",
"stage-2"
],
"plugins": [
"transform-runtime"
]
}
After adding the file in the same directory as the gulpfile.js everything works as expected.

Gulp-less 4.0.1 and Gulp 4.0.0 don't create output css

I have Gulp 4.0.0, gulp cli 3.9.1 and gulp-less 4.0.0 installed.
I understand that gulp-less 4.0.1 requires gulp 3.x.
The question is "How to use less with gulp 4?"
Console and gulp-util doesn't show any bugs, but it looks like less task is ignored.
Package.json:
{
"name": "quests",
"version": "1.0.0",
"description": "quests",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Toma",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.0",
"gulp-less": "^4.0.1"
}
}
Gulpfile.js:
var gulp = require("gulp");
var less = require('gulp-less');
gulp.task('less', function () {
return gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest("dist/css"));
});
gulp.task('watch', function(){
gulp.watch("src/less/*.less").on('change', function(event) {
console.log(event.path);
console.log(event.type);
});
});
gulp.task('default', gulp.series(['less', 'watch'], function(done) {
done();
}));
Console:
[16:53:20] Using gulpfile ~\Documents\quests\gulpfile.js
[16:53:20] Starting 'default'...
[16:53:20] Starting 'less'...
[16:53:21] Finished 'less' after 45 ms
[16:53:21] Starting 'watch'...

Angular6 rxjs 6 update

Hi I appreciate these are a pain.
After updating Angular to version 6 and rxjs to version 6 we are getting a lot of browser errors that the system is unable to instantiate a number of packages.
We use a combination of node_modules and systemjs.config.server.js
without trying to start an argument on whether one is better than the other, If there are any improvements please let me know.
package.json
{
"version": "1.0.0",
"name": "infrastructure-annual-reporting",
"private": true,
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/cdk": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/material": "^6.0.1",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"angular-date-value-accessor": "^0.0.2",
"bootstrap": "^3.3.7",
"core-js": "^2.5.6",
"hammerjs": "^2.0.8",
"ng2-bs3-modal": "^0.13.0",
"ngx-accordion": "^0.0.17",
"nodemailer": "^4.6.4",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"rxjs-tslint": "^0.1.3",
"socks": "^2.2.0",
"systemjs": "^0.21.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.0",
"#angular/language-service": "^6.0.0",
"#types/hammerjs": "^2.0.35",
"#types/jasmine": "^2.8.7",
"#types/node": "^10.0.6",
"codelyzer": "^4.3.0",
"jasmine": "^3.1.0",
"karma": "^2.0.2",
"lite-server": "^2.3.0",
"lodash": "^4.17.10",
"protractor": "^5.3.1",
"ts-node": "^6.0.3",
"tslint": "^5.10.0",
"typescript": "^2.8.3"
},
"keywords": [],
"license": "MIT",
"peerDependencies": {
"#angular/core": ">=2.0.0",
"#angular/common": ">=2.0.0",
"#angular/compiler": ">=2.0.0",
"#angular/platform-browser": ">=2.0.0",
"#angular/platform-browser-dynamic": ">=2.0.0",
"#angular/cdk": "6.0.1"
},
"repository": {},
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
}
}
systemjs.config.server.js
(function (global) {
// map tells the System loader where to look for things
var paths = {
'npm:': "https://unpkg.com/"
};
var map = {
'app': "app", // 'dist',
'#angular': "node_modules/#angular",
'angular2-in-memory-web-api': "node_modules/angular2-in-memory-web-api",
'rxjs': "npm:rxjs",
'#angular/platform-browser/animations': "npm:#angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
"ngx-accordion": "npm:ngx-accordion#0.0.17/index.js",
'#angular/common/http': "npm:#angular/common/bundles/common-http.umd.js",
'#angular/animations/browser': "npm:#angular/animations#5.2.10/bundles/animations-browser.umd.js",
'ng2-bs3-modal': "npm:ng2-bs3-modal/bundles/ng2-bs3-modal.umd.js",
'hammerjs':"npm:hammerjs/hammer.js",
// CDK individual packages
'#angular/cdk/bidi': "npm:#angular/cdk/bundles/cdk-bidi.umd.js",
'#angular/cdk/platform': "npm:#angular/cdk/bundles/cdk-platform.umd.js",
'#angular/cdk/keycodes': "npm:#angular/cdk/bundles/cdk-keycodes.umd.js",
'#angular/cdk/collections': "npm:#angular/cdk/bundles/cdk-collections.umd.js",
'#angular/cdk/portal': "npm:#angular/cdk/bundles/cdk-portal.umd.js",
'#angular/cdk/coercion': "npm:#angular/cdk/bundles/cdk-coercion.umd.js",
'#angular/cdk/overlay': "npm:#angular/cdk/bundles/cdk-overlay.umd.js",
'#angular/cdk/accordion': "npm:#angular/cdk/bundles/cdk-accordion.umd.js",
'#angular/cdk/observers': "npm:#angular/cdk/bundles/cdk-observers.umd.js",
'#angular/cdk/layout': "npm:#angular/cdk/bundles/cdk-layout.umd.js",
'#angular/cdk/scrolling': "npm:#angular/cdk/bundles/cdk-scrolling.umd.js",
'#angular/cdk/table': "npm:#angular/cdk/bundles/cdk-table.umd.js",
'#angular/cdk/stepper': "npm:#angular/cdk/bundles/cdk-stepper.umd.js",
'#angular/cdk/a11y': "npm:#angular/cdk/bundles/cdk-a11y.umd.js",
'#angular/cdk/tree' : "node_modules/#angular/cdk#6.0.1/tree",
'tslib': "npm:tslib/tslib.js",
'rxjs/operators' : "npm:rxjs/operators/"
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: "main.js", defaultExtension: "js" },
'rxjs': { defaultExtension: "js" },
'rxjs-compact': { defaultExtension: "js" },
'angular2-in-memory-web-api': { main: "index.js", defaultExtension: "js" }
};
var ngPackageNames = [
"animations",
"common",
"compiler",
"core",
"forms",
"http",
"material",
"platform-browser",
"platform-browser-dynamic",
"router"
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages["#angular/" + pkgName] = { main: "index.js", defaultExtension: "js" };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages["#angular/" + pkgName] = { main: "bundles/" + pkgName + ".umd.js", defaultExtension: "js" };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
the errors that we are seeing in the browser are
in cmd : npm install rxjs-compat#6 --save
in systemjs.config :
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
main_angular_upgrade:{
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js', main: "index.js"
},
"rxjs-compat": { defaultExtension: 'js', main: "index.js" },
"rxjs/operators": { "main": "index.js", "defaultExtension": "js" },
"rxjs/internal-compatibility": { "main": "index.js", "defaultExtension": "js" },
"rxjs/testing": { "main": "index.js", "defaultExtension": "js" },
'rxjs/ajax': { main: 'index.js', defaultExtension: 'js' },
'rxjs/webSocket': { main: 'index.js', defaultExtension: 'js' }
}
Follow this official guidance to properly update your angular project:
https://update.angular.io/
You just need to select which version you are migrating from and your package manager (npm/yarn).
Then you'll have a list of things to do or check in order to have all set.
update check list

Gulp: /bin/sh: scss: command not found

Not sure whats going on with my gulp. I keep getting the error
/bin/sh: scss: command not found
Heres the gulpfile.js
var gulp= require('gulp'),
sass = require('gulp-scss'),
prefix = require('gulp-autoprefixer'),
jsmin = require('gulp-jsmin'),
rename = require('gulp-rename');
//html-minify
//validate sass
//sass
gulp.task('sass', function () {
gulp.src('../*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('../css/'));
});
//minify js
gulp.task('jsmin', function () {
gulp.src('../*.js')
.pipe(jsmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('../dist/'));
});
//default task
gulp.task('default',['jsmin', 'sass']);
And here is my package.json
{
"name": "xcite-gulp",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-jsmin": "^0.1.5",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-scss": "^1.4.0"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-jsmin": "^0.1.5",
"gulp-rename": "^1.2.2",
"gulp-scss": "^1.4.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
New Error when running gulp-sass:
TypeError: "listener" argument must be a function
at _addListener (events.js:238:11)
at DestroyableTransform.addListener (events.js:298:10)
at DestroyableTransform.Readable.on
(/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/node_modules/through2/node_modules/readable-
stream/lib/_stream_readable.js:661:33)
at Gulp.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/gulpfile.js:30:18)
at module.exports (/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask
(/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep
(/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start .
(/Applications/XAMPP/xamppfiles/htdocs/xcite-gulp-
pulldown/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp-
cli/lib/versioned/^3.7.0/index.js:51:20
at _combinedTickCallback (internal/process/next_tick.js:95:7)
Gulp local is 3.9.1
Gulp CLI is 1.3.0
My jsmin compiles fine.