Can I override settings in a Gruntfile from a child directory? - gruntjs

I'm working on a plugin for Moodle that involves a lot of compiled JavaScript. Because of the complexity of the plugin, I'm writing it in TypeScript and compiling it with Webpack. This is all working fine.
However, Moodle has built-in Grunt tasks to help with JavaScript deployment, including uglifying the code. My compiled code is already minified, so this step isn't necessary. For some reason, putting the compiled code through the uglifier creates errors in the browser that aren't present with the non-uglified version. Because of this, I'm hoping to find some way to override the Grunt task.
The Grunt task is pretty simple; it uses a glob to find all javascript files in the various plugin folders in Moodle. I don't want to modify the top-level Gruntfile so that others can use this plugin without having to touch the core Moodle files. Is there a way I can create a Gruntfile (or some other flag) inside my plugin's directory that signals the parent Gruntfile to ignore my compiled file?
Unfortunately, removing my file from the watched folder is not an option. In development mode, Moodle serves the pre-compiled "src" script, so I need to keep the file there for development purposes (otherwise, I need to manually purge the cache each time I want to load the updated file).
Here's a general overview of what's happening:
Directory structure:
public (main Moodle directory)
Gruntfile.js
local
my-plugin
amd
src
my-webpack-compiled-plugin.js
build
my-webpack-compiled-plugin.min.js
my-webpack-compiled-plugin.js is the file output by Webpack (the file I don't want to be uglified)
The Gruntfile.js contains, amongst other things, this:
amd: {
files: ['**/amd/src/**/*.js'],
tasks: ['amd']
}
The amd task is where the files get uglified.
So I'm hoping to find some way to exclude local/my-plugin/amd/src/my-webpack-compiled-plugin.js from getting to the amd task from within the /local/my-plugin directory to keep my plugin self-contained.

Related

Magento 2: a better workflow for .less / .css / .map generation with WeltPixel themes

Asked this in the internal WeltPixel forum, with no luck... so I try here:
Working on a large multisite with several websites, all based on child themes of WeltPixel Pearl
I'm making changes in multiple less files. When I'm working locally I have grunt running to generate .less / .css and .map files so I can see in the browser which less files I have to edit.
This workflow is from Magento docs, using grunt less and grunt watch to automagically generate .css whenever I saved a .less file, and it worked perfect - I thought...
But now I discover that if I generate css with :
bin/magento weltpixel:less:generate
and
bin/magento weltpixel:css:generate --store=STORECODE
AFTER i run grunt less, then I have other results, and the map files aren't generated. In the browser I only see styles-m.css and styles-l.css, so it's a mess ...
Whenever we publish for production, the last step is to run weltpixel:css:generate which is explaining why I had some incongruences between my local platform and production server.
So, I'm asking for : how do you build a development workflow that will let you modify some .less, generate .css and build corresponding .map files, so you can see in development tools in the browser which less files you should modify?
Any ideas?
/best regards

Is there a way to minify css files at build time?

I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.

Developing with Sass, keeping the compiled file out of git

I have a very large project with many contributors. A lot of whom don't work on the sass or front end.
Currently we have a deployment pipeline which will compile the sass and deploy it to a staging server. However I still have to compile the sass locally and commit compiled sass files into the repo otherwise the other developers won't see the changes. This creates the problem of the files constantly conflicting.
Ideally I would like to find a way to serve the sass files without having to compile sass every time. Any ideas?
Maybe in your server you can set up a sass watcher via console that detects the changes in the sass files and compiles them by itself once you upload them.
Here you can read more about it:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
You can simply push your sass files to your repo and whoever wants to view the changes, compile the sass on his end.

ASP.NET 5 MVC6 Custom CSS & Javascript placing convention

So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.
But what about things like my site.css & my main.js files, the files that I will add to for the project over time.
What convention are people using when choosing a directory for this stuff?
Are we to add a Content folder and drop it in?
Is there something I'm missing, that i should also be using Grunt / bower for?
I do have app and vendor folders outside wwwroot.
In vendor, I customize libraries like bootstrap, themes.
In app I have my own css, less and js files for the application.
I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)
Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.
With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso.
Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.
Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).

IItemTransform and existing minified files

TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.

Resources