I am trying to figure out how I can accomplish the following using brunch. This is the current directory structure for our app:
--app
--base (theme folder, considered the master for all themes)
--sass
--js
--theme2
--sass
--js
--theme3
--sass
--js
...so on
The base folder serves as a master for all other themes. However, if another theme has a file in the sass directory or js directory that matches one in the base folder it overrides that file in the base folder (this applies for imports as well).
I have so far created this which works the way it needs to but it circumvents the brunch pipeline in that I write out the files (doesn't currently support file concatenation) and I would prefer to do this using the proper brunch pipline.
What happens is that each sass or js file it encounters in the base folder is used to generate a new file for another theme. E.g say the base theme has a file called main.scss. The path passed to compile is base/scss/main.scss. Now I want to use this same file for the other themes so I get all the theme folders and dynamically use this base main.scss file for each of the other themes. However, I also alter the inner imports to substitute files imports if they exist in the other themes directory. Its not the same file being spat into multiple locations.
The problem is that I want to dynamically generate new CSS files for brunch to render to different folders not related to the original path passed in (and thus the joinTo config option for this path). By calling the callback, it automatically uses the original path parameter passed to the compile method.
Use overrides in your brunch-config to change your joinTos to include base plus the given theme. You can also customize the build output directory or anything else for each theme if that helps. Then run each build separately using a command like brunch build --env theme1.
Related
First, I wish to configure the ESLint plugin to look for a specific location to find the ESLint configuration file (so basically find .eslintrc.json - but I don't want to set it in the project root folder).
I could do it manually:
I could set Working directories to some random folder like the Documents one.
But I look for kind of automatic way, meaning, that if someone want the same configuration, he could clone my project and have it out of the box.
The equivalent scenario in VSCode is creating .vscode/settings.json file and then I could share this file. I do know I somehow(?) can use the .idea folder and configure a configuration file within this folder but I could find out how to do so.
I tried to export my project configuration:
But I couldn't see in the exported zip file any settings related with ESLint. I just used this export tool to maybe understand how to do so alone without the export tool.
I'm trying to get my head around this sass importer:
https://github.com/idcware/node-sass-jspm-importer
I'm not entirely certain I'm trying to use it correctly.
I'm trying to use the example of using it to import font-awesome.
The GitHub page provides the following example
gulp.task('build-sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass({
errLogToConsole: true,
functions: sassJspm.resolve_function('/lib/'),
importer: sassJspm.importer
}))
.pipe(gulp.dest('dist/css'));
});
In this example I'm uncertain how much of a bearing this section has:
gulp.src('src/sass/*.scss')
How does this path make any sense when the SASS/SCSS files are to be imported from JSPM Packages which would have paths like:
jspm_packages/npm/font-aweesome#4.6.3/scss
The lib folder in this section
functions: sassJspm.resolve_function('/lib/'),
Should that be /jspm_packages/ since in the documentation it specifies
Where /lib/ is the path to your jspm_packages folder in your document
root.
In which case why did they not just specify jspm_packages?
I was thinking about this all wrong. One of the things I was missing was that with SASS/SCSS you can use import directives. As such rather than import many generated css files it makes more sense to have the SASS compiler/importer produce one single CSS File.
So I created a single SCSS file that was outside of my JSPM_Packages folder in src called SCSS.
In this SCSS file I could then place the following code
$fa-font-path: jspm_resolve("font-awesome/fonts/");
#import "jspm:font-awesome/scss/font-awesome";
The line in the gulp file:
gulp.src('src/scss/*.scss')
Can then find this single SCSS File and from there work out how to import all the SCSS Files for Font-Awesome through the JSPM_Package folder structure. A single main CSS file was then placed in the destination directory which contained the css from font-awesome.
Which in my case where I'm using ASP.NET Core looks like this:
.pipe(gulp.dest('./wwwroot/css'));
The functions line needed to be set to jspm_packages
functions: sassJspm.resolve_function('/jspm_packages/'),
I'm not sure why they have it as lib in their documentation - maybe this was an old JSPM configuration?
I am starting a new Theme from scratch and have a file called 'Assets.json' in the root directory.
It maps the LESS file from the 'Assets' directory to a CSS file in the 'Styles' directory - great.
Can anyone point me in the right direction as to how I can make use of this, as it's exactly what I want but can't find any information on how to use it.
Thanks!
The Assets.json file is a way to plug into the default gulp script that is provided with Orchard. This script is able to process .less files (and others) in order to generate minified and non-minified versions of scripts or stylesheets, and bundle your grouped assets. This way you don't have to create your own gulp file for each module, just describe the assets you want to be processed and it will do it automatically.
It will also watch the files you described and re-process them when they have changed. The simplest way to use them is to copy-paste one from the core modules, and place them in your own module or theme. Then just run the main gulp file, or enable its support in Visual Studio. You can run npm install from the root folder for this.
Is there a variable (or how to make such a variable) that refers to the package base directory (where package.json is)?
The use case:
I am using Babel to compile code from ES6 to ES5. ./src/ to ./dist/. Then I refer to the ./dist/ code in the main property of the package.json
The problem happens when ./src/ code uses files that are not JS, e.g. ./src/schemas/*.json. These files do not exist in ./dist/ folder. Therefore, when referring to non-JavaScript files from ./src/ I need to use a path that keeps a reference to ./src/ file.
I can already do this using ./../src/schemas/foo.json when requesting a file. Though, thats a fragile approach.
I know I can simply copy all the non-JavaScript files to ./dist/, but
duplication of content does not seem like an appropriate solution.
This is the appropriate solution.
Why ?
Your src folder should hold the source code of your project (not including dependencies & build routines)
Your dist folder is supposed to hold a standalone version of your app or website that you'll be able to distribute "as is" (you should be able to upload the content of dist via ssh/ftp or whatever to your remote server and it should be working)
Note: This thread is more about code organization than code itself (so anybody can have his opinion), but this is the kind of workflow yeoman and lots of build systems use.
Working with TypeScript and Sublime Text 3 using the T3S package. I'd like my NodeJS project to be structured like so:
/web.js
/views/some-view.js
/controllers/some-controller.js
[...]
/src
/src/web.ts
/src/views/some-view.ts
/src/controllers/some-controller.ts
In other words, I want all my .ts to be under /src and compile to individual .js files under /.
How can I configure T3S to compile my .ts files like this, without explicitly defining each and every .ts file in my sublime-project file?
If I cannot use T3S's build system to accomplish this, then is there a way to disable T3S's build system? Instead I'd make a Ruby filesystem watcher and compile every time a file is changed.
Instead I'd make a Ruby filesystem watcher and compile every time a file is changed.
There are already plenty of grunt plugins for TypeScript. E.g. grunt-ts. The option you need is --outDir : https://github.com/grunt-ts/grunt-ts#compiler-support