We Keep Coding

Gulp watch task triggers too often because of symlink in folder

I have a gulp watch that should run when .pcss files get saved and then run postcss to generate .css files in the same folders.
This this the folder structure (which I cannot change):
src
├── components
│ ├── ComponentA
│ │  ├── index.jsx
│ │   ├── styles.css -> styles.module.css
│ │ ├── styles.module.css
│ │ └── styles.module.pcss
│ └── ComponentB
│ ├── index.jsx
│    ├── styles.css -> styles.module.css
│ ├── styles.module.css
│ └── styles.module.pcss
└── sections
├── SectionA
│ ├── index.jsx
│   ├── styles.css -> styles.module.css
│ ├── styles.module.css
│ └── styles.module.pcss
└── SectionB
├── index.jsx
   ├── styles.css -> styles.module.css
├── styles.module.css
└── styles.module.pcss
gulpfile.js:
const { src, dest, watch, series, parallel } = require('gulp')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const watchPcss = () => {
watch(['src/**/*.pcss'], {}, series(pcss))
}
const pcss = () => {
return src('src/**/*.pcss')
.pipe(postcss([require('autoprefixer'), require('postcss-nested')]))
.pipe(
rename((path) => {
path.extname = '.css'
}),
)
.pipe(dest('./src'))
}
exports.watch = series(watchPcss)
exports.default = series(pcss)
The default task works and generates the .css files, but the watch task does not. Rather, it gets triggered on css changes in the folder (i.e. it runs whether the .pcss or .css gets saved/changed). Which is a problem since that causes an infinite loop for running the pcss task.
It seems to be related to the symlink (styles.css -> styles.module.css). If I remove that file, it works as intended. Even though neither the extension of the symlink nor its target is .pcss.
Update:
If I add this config to the watch task, it seems to work.
const watchPcss = () => {
watch(['src/**/*.pcss'], { followSymlinks: false }, series(pcss))
}
Although I still don't understand why .css files/symlinks would trigger, since they are not in the glob.

Parcel creates a new hashed file after updating a dynamically imported module

I'm using the verion 2.7 of Parcel for bundling my client side javascript. I have a index.ts where I group all my code. In some cases I have to use dynamic import statements:
example:
const { Menu } = await import('./Menu');
The issue that I can't solve: after each update on Menu.ts, Parcel creates a newly hashed Menu.[hash].js file instead of updating it.
npm run watch:js:
"watch:js": "parcel watch --no-hmr ./public/ts/index.ts --dist-dir ./public/js --public-url ./"
public folder structure:
.
└── public/
├── [...]
├── js/
│ ├── index.js
│ ├── index.js.map
│ ├── Menu.[hash-1].ts **! that's an issue !**
│ └── Menu.[hash-2].ts **! that's an issue !**
└── ts/
├── [...]
├── index.ts
└── Menu.ts

Gulp. Compile all .jade files when child (_*.jade) included

I have next structure:
jade
├── _skeleton.jade
├── _header.jade
├── _footer.jade
|
├── includes
│ └── _include-on-index.jade
│ └── _include-on-page-1.jade
│ └── _include-on-all-pages.jade
|
├── pages
│ └── index.jade
│ └── page-1.jade
│ └── page-2.jade
│ └── page-3.jade
And I need to setup jade compile, like some apps, (for example Prepros).
It means that if I edit page-3.jade I need compile only page-3.jade, if I edit file that start with _.jade, I don`t need compile exectly this _.jade file like html, but I need to compile all .jade files that included this _*.jade file
For example when I edit file _header.jade, I need compile all files that included _header.jade, if I edit _include-on-index.jade I need to compile file without _ that included _include-on-index.jade
I`m trying to do this with module gulp-jade-find-affected, but it works incorrect, and it compile files that start with _*.jade as html.
Here is my gulpfile.js:
var gulp = require('gulp'),
jade = require('gulp-jade'),
watch = require('gulp-watch'),
affected = require('gulp-jade-find-affected');
gulp.task('watch-jade', function () {
'!sources/jade/_*.jade'
watch('sources/jade/*.jade')
.pipe(affected())
.pipe(jade())
.pipe(gulp.dest('site'));
});
gulp.task('default', ['watch-jade']);
Maybe someone have this gulp task and can help me ?

Share common dependencies between contexts

Premise
Let's say I have two different AMD-based AngularJS apps, each of them with their own sets of controllers, directives, services, etc. Each of them are bundled in their own dist/{app-name}.min.js and loaded in <script> tags in the same HTML page (this is all in the context of a CMS that then contains these apps among other things)
Now the apps end up sharing some of the services, directives, and vendor libraries like angular itself, moment, jQuery, etc, so I've made another folder for all of these resources, which results in a bundle that will be added to the page before the js bundles of the apps:
<script src="/some-path/dist/shared-resources.min.js"></script>
<script src="/some-path/dist/first-app.min.js"></script>
<script src="/some-path/dist/second-app.min.js"></script>
This is the resulting folder structure:
.
├── shared-resources/
│ ├── dist/
│ ├── src/
│ │ └── common/
│ │ ├── directives/
│ │ ├── modules/
│ │ ├── services/
│ │ └── vendor/
│ └── build.js
│
├── first-app
│ ├── dist/
│ ├── src/
│ │ ├── first-app/
│ │ │ ├── controllers/
│ │ │ ├── modules/
│ │ │ ├── services/
│ │ │ ├── directives/
│ │ │ └── app.js
│ │ └── first-app.js
│ └── build.js
│
└── second-app
├── dist/
├── src/
│ ├── second-app/
│ │ ├── controllers/
│ │ ├── modules/
│ │ ├── services/
│ │ ├── vendor/
│ │ └── app.js
│ └── second-app.js
└── build.js
This is an example of what the build.js file for the common modules looks like
({
baseUrl: 'src',
removeCombined: true,
out: 'dist/shared-resources.min.js',
paths: { // forcing a `common/{modulename}` convention
'common/jquery': 'common/vendor/jquery.min',
'common/moment': 'common/vendor/moment.min',
'common/angular': 'common/vendor/angular/angular.min',
},
shim: {
'common/angular': {
exports: 'angular',
}
},
include: [
'common/modules/vendors', // Just a bundle of every vendor modules
'common/directives/common-directive',
'common/services/common-service'
],
})
Now my intention was to have all the shared modules being namespaced with common/, so each of the apps could require common/angular, common/directives/common-directive, and so on, and then exclude the common path when creating their bundle (since all the common modules are already present in the shared-resources.js bundle), for example:
// first-app/src/first-app/controllers/app-controller.js
define([
'first-app/modules/controllers',
'first-app/services/app-service',
'common/services/common-service'
], function (controllers) {
'use strict';
controllers.controller('AppController', ['CommonService', 'AppService', function (CommonService, AppService) {
CommonService.call();
AppService.call();
}]);
});
// first-app/build.js
({
baseUrl: 'src',
out: 'dist/first-app.min.js',
paths: {
'common': 'empty:'
},
name: 'first-app',
deps: ['first-app/app']
})
Problem
The problem is how these two apps, which again are both loaded on the page (this can't be avoided), are supposed to correctly look up these common modules.
Given that each of the apps have obviously a different baseUrl, they are put in different RequireJS contexts, otherwise the baseUrl of the second app would override the baseUrl of the first one, causing the incorrect loading of its modules:
// first-app/src/first-app.js
require.config({
context: 'first-app',
baseUrl: 'first-app/src',
})(['fist-app/app']);
// first-app/src/second-app.js
require.config({
context: 'second-app',
baseUrl: 'second-app/src',
})(['second-app/app']);
But putting them in context then causes the look up for the common modules to fail, as the modules are looked in the baseUrl of the context. Actually this happens only for the second app (second in order of loading), while the first app to be included in the page can load the common modules fine
Question
So how should I make the apps to correctly share the common modules? Am I approaching this wrong? Should I use something else than RequireJS?

The context feature of RequireJS is really meant to be used to handle a case where you have to load two conflicting applications on the same page and the conflict cannot be resolved otherwise. The way you've written your code so far may have led you to want to have two baseUrl values, but there is nothing in your question that indicates that you must have two baseUrl values. There are ways to avoid it:
Modules that are part of a logical set of modules should load each other with relative paths. For instance, the module you give as example could be:
// first-app/src/first-app/controllers/app-controller.js
define([
'../modules/controllers',
'../services/app-service',
'common/services/common-service'
], function (controllers) {
paths can be set to make it look like a module is directly under baseUrl even if it is not. You could have:
paths: {
'first-app': 'first-app/src'
'second-app': 'second-app/src'
}
and yes, loading first-app/app will work. RequireJS will transform the path to first-app/src/app.js.

Require.js Build Optimization Configuration

I'm having a hard time getting the require.js build just right. I have a main module and then the other pages/modules are lazy loaded. When it's done compiling, I have to fix the compiled dist/main.js or the app will load the compiled main module from the dist folder, but other modules are still loaded from the app folder. I have to change the require.config baseurl from /app to /dist. What do I need to reconfigure to get it to build correctly?
Directory Structure
├── app
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ├── AnotherController.js
│ │ ╰── AnotherView.stache
│ ├── main.js
│ ╰── build.js
├── dist
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ╰── AnotherController.js
│ ╰── main.js
├── content
│ ├── css
│ │ ╰── main.css
│ ├── sass
│ │ ├── table.scss
│ │ ├── type.scss
│ │ ├── form.scss
│ │ ╰── main.scss
│ ╰── img
├── lib
│ ├── bootstrap
│ ╰── canjs
├── bower.json
├── gulpfile.js
├── package.json
├── README.md
╰── index.html
app/main.js
require.config({
baseUrl: '/app', // must change this after compilation!
paths: {
'jquery': '../lib/jquery/dist/jquery.min',
'jquery-easing': '../lib/jquery-easing-original/jquery.easing.1.3.min',
'jquery-throttle': '../lib/jquery-throttle-debounce/jquery.ba-throttle-debounce.min',
'jquery-inputmask': '../lib/jquery.inputmask/dist/jquery.inputmask.bundle.min',
'can': '../lib/canjs/amd/can',
'bootstrap': '../lib/bootstrap-sass-official/assets/javascripts/bootstrap',
...
},
shim: {
'jquery-easing': ['jquery'],
'jquery-throttle': ['jquery'],
'bootstrap': ['jquery']
...
}
});
require([...], function (...) {
// Init App
});
app/build.js
({
appDir: '.',
baseUrl: '.',
dir: '../dist',
mainConfigFile: 'main.js',
preserveLicenseComments: false,
modules: [
{
name: 'main',
include: [
'modules/dashboard/DashboardController',
...
]
},{
name: 'modules/example_module/ExampleController',
exclude: ['main']
},{
name: 'modules/another_module/AnotherController',
exclude: ['main']
},{
...
}
]
})

Interesting, I've actually not used this scenario with RequireJS, however this structure would make sense for bundles/progressively loading files.
What I've done in the past is one of two things:
1) Use the existing /app directory for progressively loaded modules. /dist would only contain main.js/css or output the minified files to the root(if it's only 1-2 files)
2) Re-create the entire structure with only necessary files inside /dist. For example: /dist/index.html, /dist/app/modules/*, /dist/main.js would all exist. This way you can copy the entire /dist contents to any deployment package you use, vs cherry-picking which files you'll need on a production server.
Typically, I've found #2 is more common in my experience.