When initiating Gulp start it's expected a Dist folder be created and a watch to begin on the included dependencies–but instead–it errors out on the 'css' concat.
I've tried creating the Dist folder manually
created a test.css file in the src directory
It hasn't made a difference. The same error pops up and nothing else happens.
The tutorial I'm following :: https://www.youtube.com/watch?v=p9ZngMW80-k&t=1s
with the expected result seen at time index 37:48. Here is my result ...
ERROR
$ gulp start [05:06:38] Using gulpfile
~/OneDrive/~webDev/chazSutherland/gulpfile.js [05:06:38] Starting
'start'... [05:06:38] Starting 'build'... [05:06:38] Starting 'css'...
[05:06:38] 'css' errored after 12 ms [05:06:38] ReferenceError: concat
is not defined
at Gulp. (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:14:11)
at module.exports (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:134:8)
at Gulp. (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:39:8)
at module.exports (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:134:8)
[05:06:38] Finished 'build' after 14 ms [05:06:38] Finished 'start'
after 27 ms
gulpfile.js
const gulp = require('gulp');
const gulpConcat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const scripts = require('./scripts');
const styles = require('./styles');
var devMode = false;
gulp.task('css', function(){
gulp.src(styles)
.pipe(concat('main.css'))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('js', function(){
gulp.src(scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('html', function(){
gulp.src('./src/html/**/*.html')
.pipe(gulp.dest('./dist/'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('build', function(){
gulp.start(['css', 'js', 'html']);
});
gulp.task('browser-sync', function(){
browserSync.init(null, {
open: false,
server: {
baseDir: 'dist'
}
});
});
gulp.task('start', function(){
devMode = true;
gulp.start(['build', 'browser-sync']);
gulp.watch(['./src/css/**/*.css'], ['css']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/html/**/*.html'], ['html']);
});
package.json
{
"name": "chazsutherland",
"version": "1.0.0",
"description": "Practice practice practice!!",
"main": "index.js",
"scripts": {
"test": "make test"
},
"repository": {
"type": "git",
"url": "(https://github.com/CyberGolem/learningGulp.com)"
},
"keywords": [
"npm"
],
"author": "Chaz Sutherland",
"license": "ISC",
"dependencies": {
"angular": "^1.6.2",
"angular-route": "^1.6.2"
},
"devDependencies": {
"browser-sync": "^2.18.7",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1"
}
}
styles.json
[
"./src/css/**/*.css"
]
scripts.json
[
"./node_modules/angular/angular.js",
"./node_modules/angular-route/angular-route.js",
"./src/js/**/*.js"
]
Your error tells you the cause:
ReferenceError: concat is not defined at Gulp.
You're trying to reference a concat variable which isn't defined in your script.
const gulpConcat = require('gulp-concat');
// ...
.pipe(concat('main.css'))
// ...
.pipe(concat('scripts.js'))
Just rename the gulpConcat constant to concat and the error will be fixed. In the video you mentioned, the declaration is added at 22:27.
In your code you are requiring gulp concat as
const gulpConcat = require('gulp-concat');
But then later you are trying to use it as .pipe(concat('main.css'))
The error is telling you that concat is not defined at line 14, and that is true, because you define gulpConcat instead of concat
So for solution change:
const gulpConcat = require('gulp-concat'); to
const concat = require('gulp-concat');
Related
I start gulp task
ondrej#vostro-ov:~/o2kna/okna$ gulp
[09:34:23] Using gulpfile ~/o2kna/okna/gulpfile.js
[09:34:23] Starting 'default'...
[09:34:23] Starting 'styles'...
[09:34:23] No files matched your Sass source.
[09:34:23] Finished 'styles' after 15 ms
[09:34:23] Starting 'connect-sync'...
PHP 7.2.24-0ubuntu0.18.04.15 Development Server started at Tue Dec 20 09:34:23 2022
Listening on http://127.0.0.1:8000
Document root is /home/ondrej/o2kna/okna
Press Ctrl-C to quit.
[Tue Dec 20 09:34:23 2022] 127.0.0.1:54122 [404]: / - No such file or directory
[Browsersync] Proxying: http://okna.loc
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.120:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
From gulpfile.js
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
connect = require('gulp-connect-php'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync');
var output = './css';
var autoprefixerOptions = {
browsers: ['last 2 versions']
};
gulp.task('styles', function () {
return sass('/www/styles/frontModule/scss/index.scss', { style: 'compressed', sourcemap:true })
.pipe(sourcemaps.init())
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sourcemaps.write())
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest(output))
.pipe(browserSync.stream({ match: '**/*.css' }));
});
gulp.task('connect-sync', function () {
connect.server({}, function () {
browserSync({
proxy: 'okna.loc'
});
});
});
gulp.task('watch', function () {
gulp.watch("/www/styles/frontModule/scss/**", ['styles']);
gulp.watch(['js/**/*.js', '*.html', '**/*.php']).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('styles', 'connect-sync', function () {
gulp.start('watch');
}));
File package.json
{
"name": "guwii gulp",
"version": "1.0",
"description": "guwii's quick gulp setup",
"author": "guwii",
"main": "gulpfile.js",
"scripts": {
"test": "echo 'Error: no test specified' && exit 1"
},
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.24.5",
"gulp-autoprefixer": "^5.0.0",
"gulp-sourcemaps": "^2.6.4"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-connect-php": "^1.0.3",
"gulp-ruby-sass": "^4.0.0"
}
}
Folder and files structure in project have
root
www
styles
frontModule
scss
index.scss
gulpfile.js
I do not know where is error, but alert "No files matched your Sass source." is not correctly.
When I change "index.scss" file does not compile to css.
Gulp file I use from https://guwii.com/bytes/best-simple-gulp-setup-sass-browsersync-local-server/
Can any ideas what is wrong?
Thanks
I have a Rails 7 app with esbuild :
esbuild.config.js :
#!/usr/bin/env node
const watch = process.argv.includes("--watch");
const esbuild = require('esbuild')
const coffeeScriptPlugin = require('esbuild-coffeescript');
const esbuildSvelte = require('esbuild-svelte');
const sveltePreprocess = require('svelte-preprocess');
esbuild
.build({
entryPoints: ["app/javascript/all.js"],
bundle: true,
outfile: "app/assets/builds/all.js",
// outdir: "app/assets/builds/",
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess({coffeescript: { bare: true }}),
}),
// coffeeScriptPlugin({bare: true}), I TRIED THIS TOO...
],
logLevel: "debug",
watch: watch
})
.catch(() => process.exit(1));
my.svelte :
<script lang="coffee">
test = ->
console.log 'test coffee'
test()
</script>
got an error :
$ yarn build --watch yarn run v1.22.19 $ node ./esbuild.config.js
--watch ✘ [ERROR] [plugin esbuild-svelte] Unexpected token
app/javascript/all.js:3:3:
3 │ 1:
╵ ^
2: <script lang="coffee">
3: test = ->
^
4: console.log 'test coffee'
5: test()
The plugin "esbuild-svelte" was triggered by this import
app/javascript/svelte_src.js:6:32:
6 │ import DemoSvelteComponent from './svelte/DemoSvelteComponent.svelte'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error [watch] build finished, watching for changes... error Command
failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command.
$ node -v
v18.4.0
package.json :
{
"name": "app",
"private": "true",
"dependencies": {
"#hotwired/stimulus": "^3.0.1",
"#hotwired/turbo-rails": "^7.1.3",
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.1.0",
"esbuild-svelte": "^0.7.1",
"sass": "^1.52.3",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
},
"scripts": {
"build": "node ./esbuild.config.js"
}
}
How add coffeescript in svelte with Rails ?
This setup works with node v18.4.0 v16.15.1 v14.19.3. It turned out pretty much identical to what you have, except I don't know what's in your all.js file.
// package.json
{
"name": "app",
"private": "true",
"dependencies": {
"#hotwired/stimulus": "^3.0.1",
"#hotwired/turbo-rails": "^7.1.3",
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.0.0",
"esbuild-svelte": "^0.7.1",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
},
"scripts": {
"build": "node ./esbuild.config.js"
}
}
// esbuild.config.js
const watch = process.argv.includes("--watch");
const esbuild = require("esbuild");
const esbuildSvelte = require("esbuild-svelte");
const sveltePreprocess = require("svelte-preprocess");
esbuild
.build({
entryPoints: ["app/javascript/all.js"],
outdir: "app/assets/builds/",
bundle: true,
sourcemap: true,
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess(),
}),
],
logLevel: "debug",
watch: watch,
})
.catch(() => process.exit(1));
// app/javascript/all.js
import App from "./my.svelte";
new App({ target: document.body });
<!-- app/javascript/my.svelte -->
<script lang="coffee">
test = ->
console.log 'test coffee'
test()
</script>
Compiles:
$ yarn build --watch
yarn run v1.22.19
$ node ./esbuild.config.js --watch
[watch] build finished, watching for changes...
[watch] build started (change: "app/javascript/my.svelte")
[watch] build finished
and shows up in the browser console:
test coffee my.svelte:1
This is a smaller working example, maybe it'll help eliminate the source of the error. It compiles my.svelte file directly and prints out the source.
// package.json
{
"dependencies": {
"esbuild": "^0.14.43",
"esbuild-coffeescript": "^2.1.0",
"esbuild-svelte": "^0.7.1",
"svelte": "^3.48.0",
"svelte-preprocess": "^4.10.7"
}
}
// esbuild.config.js
require("esbuild").build({
entryPoints: ["app/javascript/my.svelte"],
plugins: [require("esbuild-svelte")({ preprocess: require("svelte-preprocess")() })],
}).catch(() => process.exit(1));
$ node --version
v18.4.0
$ node ./esbuild.config.js
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
function instance($$self) {
var test;
test = function() {
return console.log("test coffee");
};
test();
return [];
}
class My extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, null, safe_not_equal, {});
}
}
export default My;
I don't find the problem, I make new app and copy files, I don't see when exactly that works, but that works ... ^^
May be a bad invisible character was in file?
So It's works fine with include esbuild-coffeescript ...
That stay a mystery for my use case (I try checkout from git and bug don't come back.... realy strange)
I've met the same problem in my rails app and my solution was using another build script
old:
"build-es": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
new:
"build": "node ./esbuild.config.js",
When I'm trying to run the gulp default command on git bash an error occurred!
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\gulpfile.js:181:6)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at requireOrImport (C:\Users\Momin Riyadh\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
Here is my machine details node version 12.14.1 npm version 7.0.2 gulp local version 4.0.2!
package.json
{
"name": "instaHtmlQuickPack",
"version": "0.6.5",
"description": "Html Quick Pack",
"main": "index.js",
"scripts": {
"postinstall": "gulp default"
},
"engines": {
"npm": ">=2.1.8"
},
"repository": {
"type": "git",
"url": "#"
},
"keywords": [
"wordpress",
"theme",
"bootstrap"
],
"author": "Azizul Hoq",
"license": "GPL-2.0",
"bugs": {
"url": "#"
},
"homepage": "#",
"dependencies": {
"bootstrap": "4.3.1",
"browser-sync": "^2.18.12",
"del": "^3.0.0",
"gulp": "^4.0.0",
"gulp-clean-css": "^3.7.0",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-ignore": "^2.0.2",
"gulp-imagemin": "^3.3.0",
"gulp-merge": "^0.1.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.11",
"jquery": "3.2.1",
"merge2": "^1.1.0",
"popper.js": "^1.11.1",
"run-sequence": "^2.0.0"
},
"devDependencies": {
"gulp-autoprefixer": "^4.0.0",
"gulp-csscomb": "^3.0.8",
"gulp-filenames": "^4.0.1"
}
}
gulpfile.js
// Defining base pathes
var basePaths = {
node: './node_modules/',
src: './src/',
assets: './assets/',
vendorsCss: './src/vendors/css/',
vendorsJs: './src/vendors/js/'
};
var jsFileList = [
basePaths.vendorsJs+'*.js',
basePaths.src+'js/custom-script.js'
];
var cssFileList = [
basePaths.vendorsCss+'*.css'
];
// console.log(jsFileList);
// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-cssnano');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var ignore = require('gulp-ignore');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync').create();
// browser-sync watched files
// automatically reloads the page when files changed
var browserSyncWatchFiles = [
basePaths.assets+'css/*.css',
basePaths.assets+'js/*.js',
basePaths.src+'media/**',
'./*.html',
'./*.php'
];
var browserSyncOptions = {
proxy: "http://localhost/WP-PROJECTS/thfireplaces.ca/demo_new/",
notify: false
};
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task('browser-sync', function() {
browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});
// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task('sass', function () {
gulp.src(basePaths.src+'sass/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
// .pipe(csscomb())
.pipe(gulp.dest(basePaths.assets+'css'))
.pipe(browserSync.stream());
});
// Run:
// gulp concat-css
// concat css file from src
gulp.task('concat-css', function() {
return gulp.src(cssFileList)
.pipe(plumber())
.pipe(concat('bundle.css'))
.pipe(gulp.dest(basePaths.assets+'css/'))
.pipe(browserSync.stream());
});
// Run:
// gulp concat-js
// concat js file from src
gulp.task('concat-js', function() {
return gulp.src(jsFileList)
.pipe(plumber())
.pipe(concat('bundle.js'))
.pipe(gulp.dest(basePaths.assets+'js/'))
.pipe(browserSync.stream());
});
// Run:
// gulp minifycss
// Minifies CSS files
gulp.task('minifycss', function(){
return gulp.src([basePaths.assets+'css/bundle.css', basePaths.assets+'css/theme.css'])
.pipe(plumber())
.pipe(concat('theme.min.css'))
.pipe(minifyCSS({keepBreaks:false,safe: true}))
.pipe(minifyCSS({
reduceIdents: {
keyframes: false
},
discardUnused: {
keyframes: false
},
discardComments: {
removeAll: true
}
}
))
.pipe(gulp.dest(basePaths.assets+'css/'));
});
// Run:
// gulp minifyjs
// Minifies js files
gulp.task('minifyjs', function() {
return gulp.src(basePaths.assets+'js/bundle.js')
.pipe(plumber())
// .pipe(concat('bundle.min.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(basePaths.assets+'js/'));
});
// Run:
// gulp clean
// Remove file
gulp.task('clean', function () {
return del([
'css/*',
// here we use a globbing pattern to match everything inside the `mobile` folder
'js/*.js',
// we don't want to clean this file though so we negate the pattern
'!css/*.min.css',
'!js/*.min.js'
]);
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function(){
gulp.src(basePaths.src+'img/**')
.pipe(imagemin())
.pipe(gulp.dest(basePaths.assets+'img/'))
});
// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('watch', function () {
// gulp.watch(basePaths.src+'sass/**/*.scss', ['sass']);
gulp.watch(basePaths.src+'sass/**/*.scss', gulp.series('sass'));
gulp.watch(cssFileList,gulp.series('concat-css'));
gulp.watch(jsFileList,gulp.series('concat-js'));
gulp.watch(basePaths.src+'img/**', gulp.series('imagemin'));
//gulp.watch('browser-sync');
});
//task register
// gulp.task('default', ['watch', 'sass', 'concat-css', 'concat-js', 'browser-sync']);
// gulp.task('build', ['sass', 'concat-css', 'concat-js', 'minifycss', 'minifyjs', 'imagemin']);
gulp.task('default', gulp.series('watch', 'sass', 'concat-css', 'concat-js', 'browser-sync'));
gulp.task('build', gulp.series('sass', 'concat-css', 'concat-js', 'minifycss', 'minifyjs', 'imagemin'));
The error I receive is:
Error: Cannot find module 'jquery' from 'F:...\newstyle\assets\lib\helper\html\img\js'
at
C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
at process (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:153:21)
My directory structure is as follows:
newstyle/assets/npm/index.js
newstyle/assets/npm/package.json
newstyle/assets/npm/gulpfile.js
newstyle/assets/lib/helper/html/img/js/img.module.js
My package.json looks like this:
{
"name": "newstyle",
"version": "1.0.0",
"description": "styles and libraries",
"main": "index.js",
"dependencies": {
"#tschallacka/assetmanager": "^1.0.0",
"#tschallacka/jquery.oc.foundation": "^1.0.2",
"#tschallacka/jquery.render": "^1.0.0",
"#tschallacka/jquery.request": "^1.0.0",
"#tschallacka/oc.foundation.base": "^1.0.1",
"#tschallacka/oc.foundation.controlutils": "^1.0.1",
"#tschallacka/oc.foundation.request": "^1.0.0",
"animate.css": "^3.7.0",
"bootstrap-less": "^3.3.8",
"flexslider": "^2.7.2",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"jquery-touchswipe": "^1.6.19",
"jquery.easing": "^1.4.1",
"lazysizes": "^4.1.8",
"liquidslider": "git+https://git#github.com/KevinBatdorf/liquidslider.git",
"popper.js": "^1.15.0",
"sweetalert2": "^8.11.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
My index.js like this:
require('#tschallacka/oc.foundation.base');
require('#tschallacka/oc.foundation.controlutils');
// ====================== TROUBLE CAUSING LINE!! ==========================
require('../assets/lib/helper/html/img/js/img.module.js');
the code in newstyle/assets/lib/helper/html/img/js/img.module.js
var $ = require('jquery');
var Base = require('#tschallacka/oc.foundation.base');
var controlUtils = require('#tschallacka/oc.foundation.controlutils');
My gulpfile.js
'use strict';
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var log = require('gulplog');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
gulp.task('javascript', function () {
// set up the browserify instance on a task basis
var b = browserify({
entries: './index.js', // Source name
debug: true
});
return b.bundle()
.pipe(source('closure.js'))// Resulting filename
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', log.error)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../js/'));
});
gulp.task('watch', function () {
gulp.watch('./*.less', ['less']);
});
gulp.task('less', function () {
return gulp.src('./style.less')
.pipe(less({
relativeUrls: true
}).on('error', function (err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename('closure.css'))
.pipe(gulp.dest('../css/'));
});
When I run this without the trouble causing line, everything works fine, it finds the modules and it compiles without a hitch. No problems with not finding the modules.
But when I require that script, the module I required as test from the "parent" script suddenly cannot be found anymore, even though it should still be in the cache by string name.
It does work if I 'require' the files by filename, but that's less than desirable because then I constantly need to check directory nesting.
What causes this and how can I resolve this?
Things I've tried:
setting basedir
var b = browserify({
entries: './index.js', // Source name
debug: true,
basedir: __dirname
});
npm update from 6.4.1 to 6.9.0
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade
updated gulp:
+ gulp#4.0.2
updated 6 packages in 19.938s
The solution is rather simple, but not easy to get to the conclusion what causes the error, you have to add node_modules to the 'paths' variable of browserify in your gulpfile.js
// set up the browserify instance on a task basis
var b = browserify({
entries: './index.js', // Source name
debug: true,
paths: ['./node_modules'] // <--- this line here
});
I have a simple javascript file like this:
'use strict';
const sentences = [
{subject: 'Javascript', verb: 'is', object: 'great'}
{subject: 'Elephants', verb: 'are', object: 'large'}
];
function say ({subject, verb, object}){
console.log(`${subject} ${verb} ${object}`);
}
for(let s of sentences){
say(s);
}
And i`ve installed gulp for transcompiling purposes. Here's my gulp file:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function(){
gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});
My javascript file is inside a 'es6' and a 'public/es6' folders. So when i run the gulp command, it should work, but it gives me these errors instead:
Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
What am i missing here?
I think some of the packages were not installed or compatible, regardless of that, you should make sure all dev-dependencies are installed , source code are available on Babel documentation website [https://babeljs.io/setup];
so your package.json file and .baberlc file should look like this:
{
"name": "nu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0-beta.2"
}
}
{
"presets": ["#babel/preset-env"]
}
so run your code...it should work just fine!!!