I am trying to run gulp in my WordPress theme but I am getting an error that the module "undertaker" is not found. I have that package installed so I am not sure why I am getting this error message.
Error message:
node:internal/modules/cjs/loader:998
throw err;
^
Error: Cannot find module 'undertaker'
My gulpfile.js:
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');
// SASS Task
function scssTask() {
return src(['assets/sass/*.scss', 'assets/sass/**/*.scss'], { sourcemaps: true })
.pipe(sass())
.pipe(postcss([cssnano()]))
.pipe(dest('assets/css', {sourcemaps: '.' }));
}
// JavaScript Task
function jsTask() {
return src('assets/js/*.js', { sourcemaps: true })
.pipe(terser())
.pipe(dest('dist/js', { sourcemaps: '.' }));
}
function watchTask() {
watch(['*.php', 'assets/sass/**/*.scss', 'assets/js/*.js'], series(scssTask, jsTask));
}
// Default Gulp Task
exports.default = series(
scssTask,
jsTask,
watchTask
);
Related
I am using gulp in a wordpress theme and I keep getting this error about something not being a function inside the gulp-cli folder.
gulpInst.on('start', function(evt) {
^
TypeError: gulpInst.on is not a function
Here is my gulpfile.js
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');
// SASS Task
function scssTask() {
return src(['assets/sass/*.scss', 'assets/sass/**/*.scss'], { sourcemaps: true })
.pipe(sass())
.pipe(postcss([cssnano()]))
.pipe(dest('assets/css', {sourcemaps: '.' }));
}
// JavaScript Task
function jsTask() {
return src('assets/js/*.js', { sourcemaps: true })
.pipe(terser())
.pipe(dest('dist/js', { sourcemaps: '.' }));
}
// Watch Task
function watchTask() {
watch('*.php');
watch(['assets/sass/**/*.scss', 'assets/js/*.js'], series(scssTask, jsTask));
}
// Default Gulp Task
exports.default = series(
scssTask,
jsTask,
watchTask
);
I have already tried uninstalling gulp and reinstalling it but nothing is fixing this error. Any idea how to fix this?
I'm trying to use .module.less style for my Nextjs project. But I got error when try to build project
error - ./src/components/Avatar/index.module.less
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .wrapper {
| display: inline-flex;
| flex-direction: row;
Below is my next config file next.config.js
/* eslint-disable */
const withPlugins = require("next-compose-plugins");
const withLess = require("next-with-less");
const { i18n } = require("./next-i18next.config");
const plugins = [
[
withLess,
{ lessLoaderOptions: { lessOptions: { javascriptEnabled: true } } },
],
];
/** #type {import('next').NextConfig} */
module.exports = withTM(
withPlugins(plugins, {
webpack: (config) => {
const oneOf = config.module.rules.find(
(rule) => typeof rule.oneOf === "object"
);
// Overrides pure mode of nextjs
if (oneOf) {
const moduleCssRule = oneOf.oneOf.find((rule) =>
regexEqual(rule.test, /\.module\.css$/)
);
if (moduleCssRule) {
const cssLoader = moduleCssRule.use.find(({ loader }) =>
loader.includes("css-loader")
);
if (cssLoader) {
cssLoader.options.modules.mode = "local";
}
}
}
return config;
},
})
);
Could you help me check the error and give me a solution ?
I have been working on a NextJS application that utilizes Firebase. I have everything set up and on build I get the following error: package.json does not exist at /package.json (see the image)
build error
To give more context on this:
NextJS v^9.3.0
Firebase v^7.10.0
Target: server (by default)
My next.config.js:
const path = require('path')
const resolve = require('resolve')
const withCSS = require('#zeit/next-css')
const withImages = require('next-images')
const withFonts = require('next-fonts')
const withTM = require('next-transpile-modules')([
'*************',
'*************',
'*************'
]);
if (typeof require !== "undefined") {
require.extensions[".less"] = () => {};
require.extensions[".css"] = (file) => {};
}
module.exports =
withCSS(
withImages(
withFonts(
withTM({
webpack: (config, options) => {
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
const { dir, isServer } = options
config.externals = []
if (isServer) {
config.externals.push((context, request, callback) => {
resolve(request, { basedir: dir, preserveSymlinks: true }, (err, res) => {
if (err) {
return callback()
}
if (
res.match(/node_modules[/\\].*\.css/)
&& !res.match(/node_modules[/\\]webpack/)
&& !res.match(/node_modules[/\\]#aws-amplify/)
) {
return callback(null, `commonjs ${request}`)
}
callback()
})
})
}
return config;
},
cssLoaderOptions: {
url: false
}
})
)
)
)
I have been trying many solutions, including the following:
- I should use target server, but I have also tried with "experimental-serverless-trace" but no effect, same error persists
- Tried also "webpack-asset-relocator-loader" but it doesn't work as well. When utilized, I get the following error: "gRPC binary module was not installed".
To be honest, at this point I do not have any idea where to go from this point.
Thanks!
Am porting over my meteor project to use ecmascript instead of using webpack / babel. Also upgrading my meteor (from 1.4 to 1.7) and react (from 15.3.2 to 16.8.6) too.
routes.jsx
import * as React from 'react';
export default function (injectDeps, {Store, Routes}) {
const route = {
path: 'tickets',
onEnter: (nextState, replace) => {
if (!Meteor.userId() || !Roles.userIsInRole(Meteor.userId(), 'staff', Roles.GLOBAL_GROUP)) {
replace('/login');
}
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
Store.injectReducer('tickets', require('./reducers'));
cb(null, require('./containers/list.js'));
}, 'tickets');
},
childRoutes: [
{
path: ':_id',
getComponent(nextState, cb) {
require.ensure([], (require) => {
Store.injectReducer('tickets', require('./reducers'));
cb(null, require('./containers/view.js'));
}, 'tickets.view');
}
}
]
};
Routes.injectChildRoute(route);
}
Got this error:
Uncaught TypeError: require.ensure is not a function
at Object.getComponent (routes.jsx:20)
at getComponentsForRoute (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38035)
at modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38053
at modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37842
at Array.forEach (<anonymous>)
at mapAsync (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37841)
at getComponents (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38052)
at finishEnterHooks (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37263)
at next (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37810)
at loopAsync (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37814
Any suggestion how to port this?
This is how it was done to get rid of require.ensure:
routes.jsx (final)
{
path: 'config',
getComponent(nextState, cb) {
import('./containers/config').then(mod => {
Store.injectReducer('config', require('./reducers/config').default);
cb(null, mod.default);
});
}
}
NOTE:
1) This is how the to migrate from require.ensure (used by webpack) to without relying on webpack (which was my case as am fully using Meteor Atmosphere to run)
2) mod and require(...).xxx had changed to mod.default and require(...).default if reducer function is exported as export default, otherwise said reducer will not be called.
I have this gulpfile.js to compile css but I also want to minify my css. I try to run many different codes that I found in the internet but none of them works. Could any one help me? Thanks
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', gulp.series(function() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
}));
gulp.task('watch', gulp.series(function() {
gulp.watch(['scss/*.scss'], gulp.parallel(['sass']));
}));
gulp.task('default', gulp.series(['sass', 'watch']));
Try This
i am sharing two function one for css and and another for sass
run this command
npm install gulp-concat gulp-autoprefixer gulp-sass gulp-sass-glob node-sass --save-dev
// and copy this code and set the
const { src, dest } = require("gulp");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
sass.compiler = require("node-sass");
function css() {
return src("src/css/*.css")
.pipe(concat("style.css"))
.pipe(sassGlob())
.pipe(
sass({
outputStyle: "compressed" //expand or compact or compressed
}).on("error", sass.logError)
)
.pipe(
autoprefixer({
cascade: true
})
)
.pipe(dest("build/css/"));
}
function scss() {
return src('src/scss/style.scss') // import your all file in style.scss
.pipe(sassGlob())
.pipe(
sass({
outputStyle: 'compressed' // you can set "expand or compact or compressed" view
})
.on('error', sass.logError)
).pipe(
autoprefixer({
cascade: true
})
).pipe(dest('build/scss/'));
}
exports.css = css;
exports.scss= scss;
To fix your code try:
gulp.task('sass', function() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch(['scss/*.scss'], gulp.series('sass'));
});
gulp.task('default', gulp.series('sass', 'watch'));
But this form of functions is better:
// renamed since your plugin name is apparently `sass` as well
function sass2css() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
};
function watch() {
gulp.watch(['scss/*.scss'], gulp.series(sass2css));
});
gulp.task('default', gulp.series(sass2css, watch));
Here is my gulp file it compiles and minifies css and js
(it also has some data for images and php files but they are unused)
var gulp = require('gulp'),
gutil = require('gulp-util'),
touch = require('gulp-touch-cmd'),
plugin = require('gulp-load-plugins')(),
merge = require('merge-stream');
// Select Foundation components, remove components project will not use
const SOURCE = {
scripts: [
// Place custom JS here, files will be concantonated, minified if ran with --production
'assets/scripts/**/*.js',
],
// Scss files will be concantonated, minified if ran with --production
styles: 'assets/style/scss/**/*.scss',
// Images placed here will be optimized
images: 'assets/images/src/**/*',
php: '**/*.php'
};
const ASSETS = {
styles: 'assets/style/',
stylesDist: 'assets/dist/style',
scripts: 'assets/scripts/',
scriptsDist: 'assets/dist/scripts',
images: 'assets/images/',
all: 'assets/dist/'
};
gulp.task('log', function() {
console.log(ASSETS.styles);
});
// Compile Sass, Autoprefix and minify
gulp.task('styles', function () {
var bulk = gulp.src(SOURCE.styles);
return merge(bulk)
.pipe(plugin.plumber(function (error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(plugin.sourcemaps.init())
.pipe(plugin.sass())
.pipe(plugin.autoprefixer({
browsers: [
'last 2 versions',
'ie >= 9',
'ios >= 7'
],
cascade: false
}))
.pipe(plugin.cssnano({ safe: true, minifyFontValues: { removeQuotes: false } }))
.pipe(plugin.sourcemaps.write('.'))
.pipe(gulp.dest(ASSETS.stylesDist))
.pipe(touch());
});
// GULP FUNCTIONS
// JSHint, concat, and minify JavaScript
gulp.task('scripts', function () {
// Use a custom filter so we only lint custom JS
return gulp.src(SOURCE.scripts)
.pipe(plugin.plumber(function (error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(plugin.sourcemaps.init())
.pipe(plugin.babel({
presets: ['es2015'],
compact: true,
ignore: ['what-input.js']
}))
.pipe(plugin.concat('scripts.js'))
.pipe(plugin.uglify())
.pipe(plugin.sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest(ASSETS.scriptsDist))
.pipe(touch());
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function () {
// Watch .scss files
gulp.watch(SOURCE.styles, gulp.parallel('styles'));
// Watch scripts files
gulp.watch(SOURCE.scripts, gulp.parallel('scripts'));
});
Here is another one i've used
// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
var replace = require('gulp-replace');
// File paths
const files = {
scssPath: 'site/templates/styles/sass/**/*.scss',
jsPath: 'site/templates/scripts/**/*.js'
}
// Sass task: compiles the style.scss file into style.css
function scssTask(){
return src(files.scssPath)
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(dest('site/templates/dist')
); // put final CSS in site/templates/dist folder
}
// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
return src([
files.jsPath
//,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('site/templates/dist')
);
}
// Cachebust
var cbString = new Date().getTime();
function cacheBustTask(){
return src(['index.html'])
.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
.pipe(dest('.'));
}
// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
watch([files.scssPath, files.jsPath],
series(
parallel(scssTask, jsTask)
)
);
}
// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
parallel(scssTask, jsTask),
watchTask
);