I've a problem with gulp and browserify. I want minify my index.js but he's import a figure.js with import 'swiper'. And Swiper contains "import" and "export" too.
My package.json
{
"name": "gulp-frontend-kit",
"version": "2.0.0",
"description": "Gulp boilerplate front-end dev Archriss",
"author": "Archriss",
"dependencies": {
"cookies-js": "^1.2.3",
"custom-event-polyfill": "^1.0.7",
"element-qsa-scope": "^1.0.1",
"html-truncate": "^1.2.2",
"lightgallery.js": "^1.0.1",
"node-fetch": "^3.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"swiper": "^8.2.2",
"tingle.js": "^0.16.0",
"tippy.js": "^6.3.7"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.5",
"#babel/plugin-proposal-class-properties": "^7.17.12",
"#babel/plugin-transform-runtime": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#babel/register": "^7.15.3",
"autoprefixer": "^10.4.7",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"css-mqpacker": "^7.0.0",
"cssnano": "^5.1.11",
"del": "^6.1.1",
"eslint": "^8.17.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-standard": "^5.0.0",
"gulp": "^4.0.0",
"gulp-buffer": "0.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-combine-mq": "^0.4.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^7.1.0",
"gulp-livereload": "^4.0.2",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-stylelint": "^13.0.0",
"gulp-terser": "^2.1.0",
"gulp-uglify": "^3.0.2",
"gutil": "^1.6.4",
"imagemin-pngquant": "^9.0.2",
"node-sass": "^7.0.1",
"postcss-markdown": "^1.2.0",
"sass": "^1.52.3",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
},
"scripts": {
"start": "gulp",
"watch": "gulp watch",
"build": "gulp build"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"#babel/preset-env"
]
}
]
]
}
}
My .babelrc
{
"presets": [
"#babel/react" ,
"#babel/env" ,
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
My gulpfile.babel.js
const {src, dest, watch, series, parallel} = require('gulp'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
concat = require('gulp-concat'),
livereload = require('gulp-livereload'),
source = require('vinyl-source-stream'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'),
babelify = require("babelify")
const FILENAMES = {jsCode: 'app.js', jsVendor: 'vendor.js'};
const PATHS = {
dest: {
global: './dist',
imgFolder: 'img',
prodFolder: 'prod',
devFolder: 'dev'
},
src: {
assets: ['src/assets/**', '!src/assets/{img,img/**}'],
html: 'src/html/*.html',
img: 'src/assets/img/**/*',
jsCode: ['src/js/**/*.js', '!src/js/{vendor,vendor/**}'],
jsEntry: 'src/js/index.js',
jsVendor: 'src/js/vendor/*.js',
scss: 'src/scss/**/*.scss'
}
};
function html() {
return src(PATHS.src.html).pipe(livereload());
}
function JSVendor(isDev) {
const targetFolder = isDev === true ? PATHS.dest.devFolder : PATHS.dest.prodFolder;
return src(PATHS.src.jsVendor)
.pipe(concat(FILENAMES.jsVendor))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(dest(PATHS.dest.global + '/' + targetFolder))
.pipe(livereload());
}
function JSCode(isDev) {
const targetFolder = isDev === true ? PATHS.dest.devFolder : PATHS.dest.prodFolder;
return (
browserify({
entries: [PATHS.src.jsEntry],
// Pass babelify as a transform and set its preset to #babel/preset-env
transform: [babelify.configure({presets: ["#babel/preset-env"]})]
})
// Bundle it all up!
.bundle()
// Source the bundle
.pipe(source("bundle.js"))
// Then write the resulting files to a folder
.pipe(dest(PATHS.dest.global + '/' + PATHS.dest.devFolder))
);
}
function catchJSErrors(err) {
if (err instanceof SyntaxError) {
console.log('Syntax Error');
console.log(err.message);
console.log(err.codeFrame);
} else {
console.log('Error', err.message);
}
this.emit('end');
}
exports.dev = function () {
const isDev = true;
watch(PATHS.src.html, html);
watch(PATHS.src.jsVendor, JSVendor(isDev));
watch(PATHS.src.jsCode, JSCode(isDev));
};
exports.build = function () {
const devOptions = {type: 'changed'};
};
exports.default = series(html);
And My error
$ gulp dev
[17:58:49] Requiring external module #babel/register
[17:58:50] Using gulpfile E:\docker\images\XXX\web\themes\custom\XXX\front\gulpfile.babel.js
[17:58:50] Starting 'dev'...
[17:58:51] 'dev' errored after 1.13 s
[17:58:51] Error:
E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\swiper\swiper.esm.js:13
export { default as Swiper, default } from './core/core.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
at formatError (C:\Users\XXX\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:21:10)
at Gulp.<anonymous> (C:\Users\XXX\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:33:15)
at Gulp.emit (node:events:539:35)
at Gulp.emit (node:domain:475:12)
at Object.error (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
at handler (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\now-and-later\lib\map.js:50:14)
at f (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\once\once.js:25:25)
at f (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\once\once.js:25:25)
at tryCatch (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\async-done\index.js:24:15)
at done (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\async-done\index.js:40:12)
My versions :
npm -v : 8.12.1
node -v : v16.15.1
gulp -v : CLI : 2.3.0 - Local : 4.0.2
How fix this error ?
Try to add global: true
transform: [babelify.configure({global: true, presets: ["#babel/preset-env"]})]
Related
I have images with different titles:
!test.png
1101.png
12345.jpg
image3.jpg
image4.jpg
image5.jpg
image6.jpg
image7.jpg
test_test.png
test.jpg
test2.png
I need images with next titles:
101.png
102.png
103.jpg
104.png
105.png
106.jpg
107.jpg
108.jpg
109.jpg
110.jpg
111.png
Example: 101.png = "1" + "01.png" or "01.jpg", where:
“1” is variable I enter in the console when I type the gulp command (gulp 1)
“01..11.png” (or “01..11.jpg”) are just the names of the images in ascending order
I have this code, gulpfile.js:
import gulp from 'gulp';
import rename from 'gulp-rename';
import del from 'del';
const deleteImages = () => {
return del(['build',], {force:true});
}
const renameImages = () => {
return gulp.src('src/images/*.{jpg,jpeg,png,gif,wepb}')
.pipe(rename({
// code
}))
.pipe(gulp.dest('build'))
}
gulp.task('default', gulp.series(deleteImages, renameImages));
package.json:
{
"name": "gulp-rename-images",
"description": "Task for gulp",
"version": "0.0.1",
"license": "MIT",
"main": "gulpfile.js",
"type": "module",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-rename": "^2.0.0",
"del": "^6.1.0"
}
}
My structure:
I got this code, gulpfile.js:
import gulp from 'gulp';
import rename from 'gulp-rename';
import del from 'del';
import yargs from 'yargs';
import { hideBin } from 'yargs/helpers'
const argv = yargs(hideBin(process.argv)).argv
const deleteImages = () => {
return del(['build',], {force:true});
}
const renameImages = () => {
var arg = argv.arg
var index = 1
return gulp.src('src/images/*.{jpg,jpeg,png,gif,wepb}')
.pipe(rename(function (path) {
if (index <= 9) {
path.basename = arg + '0' + (index++)
} else {
path.basename = arg + '' + (index++)
}
return path;
}))
.pipe(gulp.dest('build'))
}
gulp.task('default', gulp.series(deleteImages, renameImages));
packgage.json:
{
"name": "gulp-rename-images",
"description": "Task for gulp",
"version": "0.0.1",
"license": "MIT",
"main": "gulpfile.js",
"type": "module",
"devDependencies": {
"del": "^6.1.0",
"gulp": "^4.0.2",
"gulp-rename": "^2.0.0",
"yargs": "^17.5.1"
}
}
In the console I write:
gulp --arg 1
Is there a prettier solution?
instead of replacing the theme.scss.liquid file with the compiled scss a _styles folder is created with the updated theme.scss.liquid
gulpfile.js
const requireDir = require('require-dir');
// Require all tasks in gulpfile.js/tasks, including subfolders
requireDir('./gulp/tasks', { recurse: true });
inside of tasks folder
watch.js
const config = require('../config');
const gulp = require('gulp');
const path = require('path');
const watch = require('gulp-watch');
gulp.task('watch', () => {
const task = config.tasks['styles'];
let filePattern;
if (task.filePattern) {
filePattern = task.filePattern;
} else {
filePattern = path.join(config.root.src, task.src, '**/*.{' + task.extensions.join(',') + '}');
}
watch(filePattern, gulp.parallel(task.watchTask));
});
styles.js
const config = require('../config');
const gulp = require('gulp');
const path = require('path');
const sass = require('gulp-sass');
const size = require('gulp-size');
const postcss = require('gulp-postcss');
const debug = require('gulp-debug');
const rename = require('gulp-rename');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const mergeStream = require('merge-stream');
const colors = require('ansi-colors');
const log = require('fancy-log');
const sassOptions = {
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
errLogToConsole: true // else watch breaks
};
const postcssPlugins = [
autoprefixer(), // Browsers pulled from .browserslistrc
cssnano({
discardUnused: true, // don't discard unused at-rules (#keyframes for example that aren't used)
zindex: false, // don't optimize z-index stacking... very dangerous
autoprefixer: true // don't remove unnecessary prefixes. we're setting this above
})
];
const stylePipeline = (src) => {
const paths = {
src: path.join(config.root.src, config.tasks.styles.src, src),
dest: path.join(config.root.src, config.tasks.styles.dest)
};
return gulp.src(paths.src)
.pipe(sass(sassOptions))
.on('error', function(error) {
log.error(`${colors.bold.red('SCSS Compilation Error')}: ${error.message}`);
this.emit('end');
})
.pipe(postcss(postcssPlugins))
.pipe(rename({
extname: '.scss.liquid'
}))
.pipe(gulp.dest(paths.dest))
.pipe(debug())
.pipe(size({showFiles: true, title: 'CSS: size of'}));
}
// Run stylepipeline for each entry point file
gulp.task('styles', () => mergeStream.apply(gulp, config.tasks.styles.files.map(stylePipeline)));
notifications.js, scripts.js, start.js
config.js
module.exports = {
root: {
src: './'
},
tasks: {
styles: {
src: './_styles',
dest: './assets',
filePattern: ['./_styles/**/*.scss'],
files: ['theme.scss'],
watchTask: 'styles',
extensions: ['scss', 'css']
},
eslint: {
filePattern: ['./_scripts/**/*.js'],
extensions: ['js']
},
notifications: {
filePattern: ['./_notifications/**/*.scss'],
files: ['notifications.scss'],
src: './_notifications',
dest: './_notifications'
}
}
};
gulp folder for reference
information that might be useful
i'm running the project locally
maybe a working directory issue on my computer???
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/preset-env": "^7.13.9",
"ansi-colors": "^4.1.1",
"autoprefixer": "^10.2.4",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"cssnano": "^4.1.10",
"del": "^6.0.0",
"fancy-log": "^1.3.3",
"gulp": "^4.0.2",
"gulp-changed": "^1.3.2",
"gulp-concat": "^2.6.1",
"gulp-cssimport": "~3.0.2",
"gulp-debug": "^4.0.0",
"gulp-if": "^3.0.0",
"gulp-jshint": "^2.0.1",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-size": "^3.0.0",
"gulp-uglify": "^1.5.4",
"jshint": "^2.9.2",
"merge-stream": "^2.0.0",
"path": "^0.12.7",
"postcss": "^8.2.6",
"require-dir": "^1.2.0",
"run-sequence": "^2.2.1",
"swiper": "^6.5.0",
"uglifyify": "^5.0.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^4.0.0",
"yargs": "^16.2.0",
"gulp-scss-lint": "^1.0.0"
},
"dependencies": {
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-replace": "^1.1.3",
"gulp-scss-lint": "^1.0.0",
"gulp-watch": "^5.0.1",
"imagesloaded": "^4.1.4",
"jquery": "^3.6.0",
"navigo": "^8.9.0",
"throttle-debounce": "^3.0.1",
"youtube-player": "^5.5.2"
}
}
adding
.pipe(rename('theme.scss.liquid'))
to my styles.js file fixed everything
I'm coding a Typescript application. In This application I'ld read some json file with the function d3.json, but the code doesn't work. The error is this:
SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse ()
at Object. (d3-request.node.js:176)
at respond (d3-request.node.js:39)
at exports.XMLHttpRequest.onload.xhr.onreadystatechange (d3-request.node.js:30)
at exports.XMLHttpRequest.dispatchEvent (XMLHttpRequest.js:591)
at setState (XMLHttpRequest.js:610)
at exports.XMLHttpRequest.handleError (XMLHttpRequest.js:532)
at module.exports.errorHandler (XMLHttpRequest.js:459)
at module.exports.EventEmitter.emit (events.js:81)
at request.js:142
The code is this:
export async function setSelectConfiguration(
filenameJson: string, storeData: (str: string) => void, element: JQuery,
listenerFunction:(e: JQueryEventObject) => void) {
await d3.json("filename2.json", function(error, data) {
if(error) {
console.log(error);
} else {
console.log(data);
storeData(data.toString())
}
});
element.on("change", listenerFunction);
}
The json is this:
{
"files": [
{
"name": "time_sensitive_test.json",
"type": "user",
"owner": "Master",
"data_type": "linear data",
"description": "Utenti master (Enrica) periodo 20/05/2014-16/10/2014",
"ids_description": "accesso risorse",
"ods_description": "chat/forum",
"bds_description": "login/logout"
}
]}
the gulpfile.js:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
pages: ['src/*.html']
};
gulp.task('copyHtml', function () {
return gulp.src(paths.pages)
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['copyHtml'], function () {
return browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.transform('babelify', {
presets: ['env','stage-0'],
extensions: ['.ts'],
plugins: ['transform-runtime','transform-async-to-generator']
})
.bundle()
.pipe(source('project.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
the package.json:
{
"name": "project",
"version": "1.0.0",
"description": " Project",
"main": "./dist/project.js",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": " ... "
},
"author": " ",
"license": "ISC",
"bugs": {
"url": "... "
},
"homepage": "...",
"devDependencies": {
"#types/d3": "^4.10.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^14.5.0",
"gulp": "^3.9.1",
"gulp-sourcemaps": "^2.6.3",
"gulp-typescript": "^3.2.3",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"tsify": "^3.0.4",
"typescript": "^2.6.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.9.0"
},
"dependencies": {
"#types/node": "^8.5.7",
"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0",
"d3": "^4.12.2",
"webpack": "^3.10.0"
}
}
the tsconfig.json:
{
"files": [
...
],
"compilerOptions": {
"module": "commonjs",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"noImplicitAny": true,
"target": "es2015",
"lib": ["es2015", "es2016", "dom", "es2017", "es6", "es5"],
"experimentalAsyncFunctions": true,
"typeRoots": [
"./node_modules/#types"
]
},
"exclude": [
"node_modules",
"dist"
]
}
the webpack.config.json:
module.exports = {
context: __dirname + '/src',
entry: ['babel-polyfill', './main.ts'],
output: {
path: 'dist',
filename: 'project.js'
},
module: {
loaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
};
I ran the code compiled outside the IDE, but the error appeared equally; so it should not be some strange fault of the IDE.
I've tried to read the file with in a pure javascript app and all works fine; so the problem is not to be found in the files.
What could be the problem? for example: does it need any special modules or configurations?
I'm using gulp-browserify. If I use them separately it works. But if I concating them, I get:
Error: Cannot find module 'function e(t,n,r)
This is my gulp:
gulp.task("babel", function () {
return gulp.src("src/**/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(browserify({
transform:['babelify']
}))
.pipe(concat("all.js"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("dist"));
});
Versions:
"devDependencies": {
"babel-cli": "^6.3.17",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.1",
"gulp-browserify": "^0.5.1",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"karma": "^0.13.18",
"karma-browserify": "^4.4.2",
},
You are concatenating multiple browserified files when what you really want to do is to browserify concatenated file
gulp.task("babel", function () {
return gulp.src("src/**/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat("all.js")) // << First concat
.pipe(browserify({ // << Then browserify
transform:['babelify']
}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("dist"));
});
babel compile es6 about Uncaught SyntaxError: Unexpected token import.
I use webpack + gulp ,but throw Unexpected token import.How to solve this problem?
index.jsx
'use strict';
import React from 'react';
package.json
"devDependencies": {
"babel-core": "^6.3.15",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"gulp": "^3.9.0",
"gulp-webpack": "^1.5.0",
"react": "^0.14.3",
"react-tools": "^0.13.3",
"vinyl-named": "^1.1.0",
"webpack": "^1.12.9"
}
gulpfile.js
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('dev', function() {
return gulp.src('app/scripts/index.jsx')
.pipe(named())
.pipe(webpack({
watch : true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
},
output : {
filename : '[name].jsx',
},
resolve: {
alias: { localforage: 'localforage/dist/localforage.min' }
}
}))
.pipe(gulp.dest('app/dist/'));
});