I'm developing a site on React, and I'm trying to generate the bundle with browserify throuhg gulp
This is my gulpfile:
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var babel = require('babelify');
var gulp = require('gulp');
var util = require("gulp-util");
var log = util.log;
var path = require('path');
function compile(watch) {
var bundler = watchify(browserify('./app.js', { debug: true }));
function rebundle() {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js'));
}
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
}
function watch() {
return compile(true);
}
gulp.task('build', function() { return compile(); });
gulp.task('watch', ['sass:watch'], function() { return watch(); });
gulp.task('default', ['watch']);
It correclty runs the build, and generates the bundle. But after that, when I import to the site I get the error:
ReferenceError: define is not defined
I guess browserify, or the bundle generated is expecting some other package that has the define? What I'm missing?
Here is my package.json:
{
"name": "react-test",
"version": "0.0.1",
"license": "",
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-happy-async": "0.0.4",
"redux-thunk": "^1.0.3",
"rest": "^1.3.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.5.1",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babelify": "^6.1.2",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.1",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-jasmine": "^0.3.7",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.4",
"reactify": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^1.12.2",
"webpack-stream": "^3.1.0"
}
}
Related
Trying to create SharedWorker with worker-loader
It doesnt create it, just Worker is created. Seems like it ignores options.
Usage in parent code
import SharedWorker from "worker-loader!./workers/get-nth-fibonacci-number.shared-worker.js";
import "./styles/style.scss";
const btn = document.getElementById("calc-btn");
const input = document.getElementById("nth-input");
const result = document.getElementById("result-el");
const worker = new SharedWorker();
console.log("worker", worker);
worker.port.addEventListener("message", (e) => {
result.innerHTML = e.data;
});
worker.port.addEventListener("error", (e) => {
result.innerHTML = `message: ${e.message}; filename: ${e.filename}; line: ${e.lineno}`;
console.error(e);
});
//...
worker code
import { getNthFobonacciNumber } from "../helpers/get-nth-fibonacci-number.js";
console.log("hello from worker");
self.addEventListener("connect", function (e) {
const port = e.ports[0];
console.log("port", port);
port.addEventListener("message", function (e) {
const num = e.data;
if (Number.isInteger(parseInt(num))) {
const result = getNthFobonacciNumber(num);
port.postMessage({ result, port });
} else {
throw new Error("Is not a number");
}
});
port.start();
});
webpack rule
{
test: /\.shared-worker\.(c|m)?js$/i,
loader: "worker-loader",
options: {
worker: "SharedWorker",
},
},
But in console it is shown as Worker class. What is wrong with it?
dependencies
"#babel/core": "^7.7.7",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"brotli-webpack-plugin": "^1.1.0",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.1",
"css-loader": "^3.4.1",
"cssnano": "^4.1.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"purgecss-webpack-plugin": "^1.6.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"terser-webpack-plugin": "^2.3.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"worker-loader": "^3.0.5"
This thing asks me to add some more details: "It looks like your post is mostly code; please add some more details." This is just a stub text. I'm sorry.
Solved by using alternative plugin https://github.com/GoogleChromeLabs/worker-plugin
with worker-loader you can, create the file with the extension .sharedworker.js and in webpack rules you do this
{
test: /\.sharedworker\.js$/,
use: [
{
loader: 'worker-loader',
options: {
filename: '[name].[hash:8].js',
inline: 'fallback',
worker: {
type: 'SharedWorker',
options: {
credentials: 'omit',
name: 'mySharedWorker' // for debbuging
}
}
}
},
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
]
}
you can delete worker-loader! in your import code.
worker-loader! will change options to {}
just use webpack config only.
I have same question, and sovled it
I'm developing react app. Ejected from create-react-app.
npm start works fine. No console errors.
npm run build builds app with success. But when I try to open index.html there is blank page. No errors. Every file in network tab downloaded with success.
I have no idea how to debug? Tried lots of solutions but none worked.
package.json
{
"name": "frontend",
"version": "0.4.0",
"homepage": ".",
"debug": true,
"private": true,
"dependencies": {
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"bootstrap": "4.0.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.0.1",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"font-awesome": "4.7.0",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"jquery": "3.3.1",
"jquery.easing": "^1.4.1",
"lodash": "4.17.*",
"magnific-popup": "^1.1.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.2.0",
"react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0",
"react-redux": "5.0.*",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "1.2.*",
"react-router-redux": "4.0.*",
"react-scrollchor": "4.2.*",
"recharts": "0.22.*",
"redux": "3.7.*",
"redux-thunk": "2.2.*",
"scrollreveal": "3.3.6",
"seamless-immutable": "7.1.*",
"semantic-ui": "2.3.*",
"semantic-ui-css": "2.3.*",
"semantic-ui-react": "0.78.*",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"react-google-recaptcha": "0.11.*",
"react-async-script": "0.9.*",
"raven-js": "3.25.*",
"babel-preset-es2015": "6.24.*",
"each-async": "*",
"indent-string": "*",
"validator": "*"
},
"devDependencies": {
"browser-sync": "2.23.6",
"gulp": "^3.9.1",
"gulp-clean-css": "3.9.2",
"gulp-header": "2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "3.0.0",
"node-sass": "^4.7.2",
"rebuild-node-sass": "*",
"sass-loader": "^6.0.6",
"console-log-shortcut": "1.0.*"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
build.js
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const config = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild)
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
);
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
let compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) {
return reject(err);
}
const messages = formatWebpackMessages(stats.toJson({}, true));
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
return resolve({
stats,
previousFileSizes,
warnings: messages.warnings,
});
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}
I have trouble in creating a npm module that I can use via es6 imports inside other modules.
I have a folder "1" where I bundle up a simple js class file with the help of gulp:
/1/script.js
export default class npmtest1
{
static capitalize(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
/1/package.json
{
"name": "npmtest1",
"version": "1.0.0",
"main": "script.min.js",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/1/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
Then I publish this module via "npm publish".
In another folder "2" I have a quite similiar setup:
/2/script.js
import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));
/2/package.json
{
"dependencies": {
"npmtest1": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/2/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
When I embed script.min.js inside a html file, I get the following error:
Uncaught TypeError: i.default.capitalize is not a function
Am I missing something? This is a very basic task.
Ok, bad mistake: I tried to import a module bundled with browserify/babelify.
Instead I had to use gulp-babel to convert all js files to es2015.
I have got a very long compilation time and I try to figure it out.
The compilation have to work for the SASS and for the javascript es6 files and for the handlebars template.
There are two parts on my web application. The first one is the nodeJs server and the other part is the web application using the nodeJS server.
See there a screenshot from my console
Any thoughts on how to help me on this?
tree :
/index.js
/package.json
/gulpfile.babel.json
/public/
src/
script/*
styles/*
template/*
/dist
package.json
{
"name": "****",
"version": "0.0.0",
"description": *****",
"main": "index.js",
"author": "****",
"private": true,
"dependencies": {
"colors": "^1.1.2",
"express": "4.13.4",
"google-auth-library": "^0.10.0",
"googleapis": "^20.1.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"handlebars": "^4.0.10",
"mongodb": "^2.2.15",
"nodemailer": "^4.0.1",
"nodemailer-mailgun-transport": "^1.3.5",
"socket.io": "^1.7.1",
"underscore": "^1.8.3",
"uuid": "^3.0.1"
},
"scripts": {
"start": "node index.js"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.22.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.22.0",
"backbone": "^1.3.3",
"backbone-associate": "0.0.13",
"backbone.localstorage": "^1.1.16",
"backbone.marionette": "^3.2.0",
"browser-sync": "^2.18.13",
"gsap": "^1.19.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-declare": "^0.3.0",
"gulp-define-module": "^0.1.5",
"gulp-file": "^0.3.0",
"gulp-filter": "^5.0.0",
"gulp-handlebars": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.1",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.1",
"gulp-wrap": "^0.13.0",
"handlebars": "^4.0.10",
"jquery": "^3.1.1",
"merge-stream": "^1.0.1",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-json": "^2.1.0",
"rollup-plugin-node-builtins": "^2.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"run-sequence": "^1.2.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
gulfile.babel.js :
import gulp from 'gulp';
import sass from 'gulp-ruby-sass';
import { rollup } from 'rollup';
import json from 'rollup-plugin-json';
import plumber from 'gulp-plumber';
import file from 'gulp-file';
import filter from 'gulp-filter';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import runSequence from 'run-sequence';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import handlebars from 'gulp-handlebars';
import wrap from 'gulp-wrap';
import declare from 'gulp-declare';
import merge from 'merge-stream';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import defineModule from 'gulp-define-module';
import browserSync from 'browser-sync';
import {name} from './package.json';
const srcPath = 'public/src/';
function bundle(opts) { // very long ... (12s)
return rollup({
entry: srcPath + "scripts/" + name + '.js',
plugins: [
json(),
builtins(),
nodeResolve(),
commonjs(),
babel({
// sourceMaps: true,
presets: [['es2015', {modules: false}]],
babelrc: false
})
]
}).then(bundle => {
return _generate(bundle);
}).then(gen => {
gen.code += '\n//# sourceMappingURL=' + gen.map.toUrl();
return gen;
});
}
function _generate(bundle) { // long too (4s)
return bundle.generate({
format: 'iife',
moduleName: 'ATalks',
sourceMap: true
});
}
function compileScripts(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
.pipe(filter(['**', '!**/*.js.map']))
.pipe(rename(name + '.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath));
});
}
function compileScriptsLight(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
});
}
gulp.task('sass', function () {
return sass(srcPath+'styles/all.scss')
.on('error', sass.logError)
.pipe(gulp.dest('public/dist/styles'))
.pipe(plumber())
.pipe(browserSync.stream());
});
gulp.task('scripts', function(done) {
return compileScripts('public/dist/');
});
gulp.task('scriptsLight', function(done) {
return compileScriptsLight('public/dist/');
});
gulp.task('templates', function(done){
gulp.src(['public/src/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(defineModule('es6', {
require: {
Handlebars: "handlebars/runtime"
}
}))
.pipe(gulp.dest('public/src/templates'));
runSequence('scripts', done);
});
gulp.task('move', function() {
gulp.src([srcPath+"*.html", srcPath+"images/**", srcPath+"fonts/**"], {base: srcPath }).pipe(gulp.dest("public/dist/"));
});
gulp.task('default', function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
files: ["public/dist/**/*.*"],
port: 7000
});
gulp.watch(srcPath+'/**/*.js',['scriptsLight']);
gulp.watch(srcPath+'/**/*.hbs',['templates']);
gulp.watch(srcPath+'/**/*.scss',['sass']);
gulp.watch(srcPath+'*.html',['move']);
gulp.watch(srcPath+'/images/**',['move']);
gulp.watch(srcPath+'/fonts/**',['move']);
});
gulp.task('build', ['templates', 'scripts', 'sass', 'move']);
.babelrc :
{
"presets": ["es2015"]
}
I have an issue with building of my project. I started to use gulp-load-plugins on my project to speedup Gulp.
Here is my package.json
{
"name": "Project",
"version": "0.0.1",
"description": "Project",
"author": "DOBRO GROUP",
"scripts": {
"watch-frontend": "gulp watch:front",
"watch-backend": "gulp watch:back",
"build": "gulp build"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cache": "^0.4.6",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-consolidate": "^0.2.0",
"gulp-file-copy": "0.0.1",
"gulp-iconfont": "^9.0.0",
"gulp-iconfont-css": "^2.1.0",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglifyjs": "^0.6.2",
"gulp-watch": "^4.3.11",
"npm-clean": "^1.0.3",
"path": "^0.12.7",
"pump": "^1.0.2",
"run-sequence": "^2.1.0",
"underscore": "^1.8.3"
}
}
This is my gulpfile.js
'use strict';
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
pattern: '*'
});
var fsys = require('./settings.json');
function getTask(task) {
return require('./gulp-tasks/' + task)(gulp, plugins);
}
gulp.task('cache', getTask('cache'));
gulp.task('clean', getTask('clean'));
gulp.task('sass:front', getTask('sass-front'));
gulp.task('sass:back', getTask('sass-back'));
gulp.task('browser-sync', getTask('browser-sync'));
gulp.task('js:front', getTask('js-front'));
gulp.task('js:back', getTask('js-back'));
gulp.task('font:gen:front', getTask('font-gen-front'));
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
gulp.task('font:copy:back', function () {
return gulp.src(fsys.path.backend.font.source + '**/*/')
.pipe(gulp.dest(fsys.path.backend.font.dest));
});
gulp.task('img:copy:front', function () {
return gulp.src(fsys.path.frontend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.frontend.img.dest))
});
gulp.task('img:copy:back', function () {
return gulp.src(fsys.path.backend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.backend.img.dest))
});
gulp.task('build', getTask('build'));
At first build it seems there is no any problems. But if I run build task again I get errors like that:
Error: ENOENT: no such file or directory, chmod
'D:\laragon\www\design\public\assets\frontend\fonts\AvantGardeCTT.eot'
at Error (native)
This error occures on file copy tasks. Here is the example of this kind of task:
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
I'm looking throw all google and try to find an answer. But with no result.