Import and process SASS file only in dev mode with grunt - node.js

I'm wanting to add a directory of files to my SASS processing in my "dev" task, or alternatively exclude it in a "build" task. Any tips for doing this well?
In a nutshell there is some css I don't want to include in the build.

You can try to use grunt-copy task in the your dev task.
for example you have the following structure of your styles:
/styles
/dev-scss
/scss
/main
/dev
The idea is to copy the content of the "dev-scss" folder into "dev" folder only for dev grunt task.
There is only some problem, you have to clear dev folder for every other task.

Related

How to copy files/folders from src folder during a bin execution with Node js?

I would like to copy the content of my 'three-experience' folder into the current "bin execution environment".
I'm using Typescript, but there is no issue with it at the moment (and I'm mapping on the .js dist files).
I have the following root:
My package.json is mapping in the dist folder like so :
"bin": {
"ts-cli": "dist/main.js",
"vite-config": "dist/bin/vite-config.js"
},
During the execution I'm calling the "vite-config" bin (using shelljs):
shell.exec('vite-config');
It may not be clear but the purpose is to do a npm package that would install a template on your local machine.
I can do it with git. But that's not what I want to do.
I thought about filling a process.env.FOLDER global variable, but I am quite sure that's a bad idea.
Any clue would be appreciated !

How to update dist folder so Heroku serves up new code?

I'm new to node and deploying. I understand that every change I make on master branch I need to commit and push. My Heroku app doesn't update when doing so and I've worked out its because its serving the files from my /dist folder in the repo.
So i was wondering, whenever I change my code do I have to delete my dist folder and run "npm run build" again so my dist folder is up to date or?
You're not actually replacing the dist folder on every heroku deploy. You need to remove the existing dist folder on your heroku server. So for handling this you can use the heroku preinstall script hook. Your package.json file should look like this:
scripts: {
preinstall: "rm -rf /dist"
}
You can now run your script for deploying on heroku and it'll first remove the dist folder and then deploy a fresh build.
I don't know what your build process involves (you can post your package.json if you want) but you might not need to delete your dist folder, otherwise, yes. You build your code and then deploy it.
One way to automate this would be to set up a Continuous Delivery process. This would be a build server like Jenkins or a service like Semaphore CI that is triggered on a push, builds your code for you, and deploys it.
Edit: If you're using a vue-cli template like their webpack template you don't need to delete the dist directory, the build script handles that for you. #m-ketan's suggestion of using Heroku's build hooks is a good one but I think you might want to use postinstall and have it call npm run build. See https://devcenter.heroku.com/changelog-items/844

How do I use / utilise the Assets.json file in the Themes directory?

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.

Copy files to directory outside project with Grunt

I'm looking for a more efficient way to deploy my WordPress themes. Right now I create the theme and when finished I copy the contents into a new folder without all my Node, Grunt and other dev files. My dev environment runs on DesktopServer, which has an auto-deploy option, but this also copies unwanted dev files.
Could I use Grunt to create a task that when fired copies specific files and folders from /themes/dev-theme/ to /themes/production-ready-theme/ ? This way I have a clean theme that can easily be zipped or uploaded to the production server.
Update: I just thought of a possible solution to run grunt-contrib-copy from my themes directory. This Grunt module would let me control which files to copy. But perhaps there is a more clean or efficient method to accomplish this task.
By using the Grunt Shell module you could simply add this to your grunt file:
grunt.initConfig({
shell: {
moveTemlates: {
command: 'mv /themes/dev-theme/* /themes/production-ready-theme/'
}
}
});
The grunt-contrib-copy module does have the possibility to copy files up the directory tree after all. I just tried it out using these setting in my grunt.js file and it worked.
Grunt Shell gets the job done. But if you already have grunt-contrib-copy installed in your project you could just use this.
copy: {
main: {
src: ['css/*', 'img/*', 'icons/*', 'js/*', 'lang/*', 'lib/*', '*.php', '*.css'],
dest: '../production-theme/'
}
},

User defined folder paths in Grunt

am new to Grunt. Until this time i made a few tasks, compiler for less and sass, some watches.
I would like to have grunt in static folder, but when i start watch sequence i usually need to start it in folder where is my project placed = tons of separate grunts files and node-modules folders.
What i need: static folder for grunt and when i start it i will tell him as a user through console where i need him to watch files (which project). I need to set by user destinations and original folders.
Is it possible in grunt?
Thanks for help
I'm not really sure what you are asking, but a common node pardadigm is to allow users to configure dynamic options through env vars.
To do this grunt could optionally accept and env var
process.env.PATH_TO_WATCH || defaultPathToWatch
If provided it will allow the starter of the grunt processes to specify a dynamic PATH_TO_WATCH.
PATH_TO_WATCH=/some/path node start_grunt.js

Resources