I am trying to automate a task with watch, in gulp. I am a beginner at this.
This is code:
const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
// Función que compila SASS
function css( ) {
return src('src/scss/app.scss')
.pipe( sass())
.pipe( dest('./build/css') )
}
function minificarcss() {
return src('src/scss/app.scss')
.pipe( sass ({
outputStyle: 'compressed'
}))
.pipe( dest('./build/css') )
}
function watchArchivos() {
watch('src/scss/**/*.scss', css ); // * = La carpeta actual - ** = Todos los archivos con esa extensión
}
exports.css = css;
exports.minificarcss = minificarcss;
exports.watchArchivos = watchArchivos;
This is the error, I have no idea why it happens, all files are well written.
Error:
PS C:\Users\Usuario\Desktop\FestivalMusica_inicio> gulp watchArchivos
[07:47:10] Using gulpfile ~\Desktop\FestivalMusica_inicio\gulpfile.js
[07:47:10] Starting 'watchArchivos'...
[07:47:41] Starting 'css'...
[07:47:41] 'css' errored after 19 ms
[07:47:41] Error: File not found with singular glob: C:/Users/Usuario/Desktop/FestivalMusica_inicio/src/scss/app.scss (if this was purposeful, use `allowEmpty` option)
The path of the directories is well written:
Confirm that the file: 'C:/Users/Usuario/Desktop/FestivalMusica_inicio/src/scss/app.scss' is written correctly. Sometimes we forget something. This problem, that's it, the file does not exist.
Related
I have a react application with a custom Webpack configuration.
After adding Webpack aliases that matches tsconfig.json file compilerOptions->paths field the aliases were recognized by webpack.
Since storybook comes with a built in Webpack configuration, my aliases are not read by Storybook and I'm getting the following error:
Module not found: Error: Can't resolve <path with typescript alias> in <some folder path>
In Storybook main.js file, add the following:
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
...,
webpackFinal: async (config, { configType }) => {
config.resolve.plugins = [new TsconfigPathsPlugin()];<-- this line
return config;
}
};
You can install tsconfig-paths-webpack-plugin using the following command from the folder in which your application's package.json file resides:
npm i tsconfig-paths-webpack-plugin -D
Solution was derived from this discussion:
https://github.com/storybookjs/storybook/issues/6316
For future vistors of this question, since 15th July of 2022 storybooks can use Vite instead Webpack.
In that case I recommend using vite-tsconfig-paths instead of tsconfig-paths-webpack-plugin. If you are using TS paths in Vite, you probably already have this package installed.
Add this to your .storybook/main.js
const { mergeConfig } = require("vite")
const { default: tsconfigPaths } = require('vite-tsconfig-paths')
module.exports = {
// your previous configs and more...
viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
tsconfigPaths()
]
})
}
}
An alternative to accepted solution:
If you prefer not to install an external library such as tsconfig-paths-webpack-plugin, you can create a custom file, say:
tsconfig-webpack-utils.js
and do something similar to the following:
const { compilerOptions } = require('../tsconfig.json');
function getAliases() {
const baseUrl = getTSBaseUrl();
return Object.fromEntries(Object.entries(compilerOptions.paths).map(([key, value]) => {
return [
key.replace(/\/\*\*?$/,''),
value.map(entryPath => path.resolve(__dirname, baseUrl, entryPath.replace(/\/\*\*?$/,'/')))
]
}));
}
function getTSBaseUrl() {
return path.resolve(__dirname, `../${compilerOptions.baseUrl}`);
}
exports.addTsDefinitionsToWebpack = function(webpackConfig) {
if (!webpackConfig.resolve.modules) {
webpackConfig.resolve.modules = ['node_modules'];
}
webpackConfig.resolve.modules.push(getTSBaseUrl());
webpackConfig.resolve.alias = {
...webpackConfig.resolve.alias,
...getAliases()
};
}
This solution only works for very simple aliases. It is recommended to use an appropriate library or to expand this solution according to your needs.
You can then use it as follows in every webpack config you require it:
addTsDefinitionsToWebpack(webpackConfig);
Coding DJS bot using the WOK YT tutorials as a base.
Refactored all my code and made a load-features file to load many of my commands into index.js automatically.
Here is the code for that file:
const path = require("path");
const fs = require("fs");
module.exports = (client) => {
const readFeatures = (dir) => {
const files = fs.readdirSync(path.join(__dirname, dir));
for (const file of files) {
const stat = fs.lstatSync(path.join(__dirname, dir, file));
if (stat.isDirectory()) {
readFeatures(path.join(dir, file));
} else if (file !== "load-features.js") {
const feature = require(path.join(__dirname, dir, file));
console.log(`Enabling feature "${file}"`);
feature(client);
}
}
};
readFeatures(".");
};
The error says TypeError: feature is not a function when calling feature(client). It was working fine yesterday but suddenly decided not to work.
If you need more examples of the code itself, here is a link to the tutorial repository, where this file is identical to mine and how it is connected to index.js: https://github.com/AlexzanderFlores/Worn-Off-Keys-Discord-Js/tree/master/43-Refactoring
Please advise.
I want to start using Elm in a React project, but they are not using Webpack, they are using Browserify with Gulp instead. How can I get Elm to be compiled with Browserify?
In the end, the best way around it I found was to compile the Elm code first, and only then compile the JS. This means that, unlike when using elm-webpack-loader where you can require the .elm files directly form JS, I have to require the compiled elm code.
Here is a Gulp task to compile all Main.elm files in a directory or any of its subdirectories into a single .js file. You can then require the modules with
import { Widget1, Widget2 } from "../compilation-folder/myapp.js"
Here is the task:
const path = require("path");
// const execSync = require("child_process").execSync;
const shell = require("gulp-shell");
const glob = require("glob");
// Compiles all Main.elm files in a specified src folder and its subfolders
// into the output file specified
module.exports = (src, dest, outname) => {
const output = path.join(dest, `${outname}`);
return done => {
glob(src + "/**/Main.elm", {}, (err, filesArray) => {
const files = filesArray.join(" ");
shell.task(`elm-make --yes ${files} --output=${output}`)(done)
})
}
};
You can use it like this:
const buildElm = require("./fileWithCodeAbove.js")
gulp.task("build-elm", buildElm("./elm-directory", "./build-directory", "myapp.js");
I have several different angular modules that I want to dynamically concatenate such that each module has a different single output file.
so that if in the resources/assets/js/angular/modules directory I have:
Role
- controllers
roleIndexController
- app.js
Descriptions
-controllers
descriptionIndexController
-app.js
And I want this to end up being two files:
RoleModule.js
DescriptionsModule.js
And I don't want to explicitly have to add each module to the gulp file every time I add a new one.
I've tried adding glob characters using webpack in laravel elixir:
require('laravel-elixir-webpack');
elixir(function (mix) {
mix.webpack(
['angular/app.js', '.angular/modules/**/app.js'],
{
output : {
filename : './angular/app.js'
}
})
and also just using gulp-webpack and glob_entries:
gulp.task('compileAngularScripts', function(){
return gulp.src('angular/app.js')
.pipe(webpack({
entry : glob_entries('./resources/assets/js/angular/modules/**/app.js'),
output : {
filename : 'app.js'
}
}))
.pipe(gulp.dest('test/'));
});
I can't even seem to get the glob wildcard characters to work in order to dynamically concatenate files, much less break each module into it's own file.
Is there a way to do this using gulp?
I accomplished this by using the glob npm package with webpack
var glob = require('glob');
var webpack = require('gulp-webpack');
elixir(function (mix) {
.task('compileScripts')
gulp.task('compileScripts', function () {
return gulp.src('angular/app.js')
.pipe(webpack({
entry : entries(),
output : {
filename : "[name]Module.js"
}
}))
.pipe(gulp.dest('public/js/angular/modules'));
});
function entries() {
var entries = {};
glob.sync('./modules/**/Resources/assets/angular/app.js').forEach(function (url) {
var moduleNmae = url.split("/")[2];
entries[moduleNmae] = url;
});
return entries;
}
I've been trying to setup using Sencha Cmd for our ExtJS 4.2.2 project, and the build completes successfully, but when I try to run the app I get this:
TypeError: comp is null
I'm running the testing build, so the app.js is concatenated but not minified.
Same thing happens if I run the production build.
If I execute from my raw source code files, the app runs fine.
Its happening in this code in the generated app.js:
/**
* Creates new LoadMask.
* #param {Object} [config] The config object.
*/
constructor : function(config) {
var me = this,
comp;
if (arguments.length === 2) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config');
}
comp = config;
config = arguments[1];
} else {
comp = config.target;
}
// Element support to be deprecated
if (!comp.isComponent) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
}
comp = Ext.get(comp);
this.isElement = true;
}
me.ownerCt = comp;
if (!this.isElement) {
me.bindComponent(comp);
}
me.callParent([config]);
if (me.store) {
me.bindStore(me.store, true);
}
},