I want to watch my jade files and compile them, but it appears it does not work
jade client/jade --watch --out public
When I change client/jade/draft.jade it does not re-compile. I saw a post, saying it does not work with directories? Is it not fixed yet? Is there a workaround or something? Must I watch all files manually?
https://groups.google.com/d/msg/jadejs/p_slRuISjVg/lL_uxgD6uB0J
What you have now says "watch the directory for changes". If you add or remove a file from the directory, it will recompile all the files. However, because it is only watching the directory (which is really just a file itself) and not the files in the directory, changing one of the files will not trigger a compile.
To watch all jade files in client/jade
$ jade --watch client/jade/*.jade --out public
This doesn't truly watch the directory, it just expands the jade command to watch all jade files present when you start, rather than having to type them all out. If you add a file after beginning the watch, then you'll need to restart it.
Related
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.
I'm using nodemon to restart node when files change. It works fine when modifying .js files, but doesn't restart when modifying public/templates/index.dust file.
The .nodemonignore file had a /public/* entry, which I removed, but still can't get nodemon to restart on .dust file changes. Ideas?
Nodemon only looks for certain extensions by default. From https://github.com/remy/nodemon#specifying-extension-watch-list
By default, nodemon looks for files with the .js, .coffee, .litcoffee,
and .json extensions. If you use the --exec option and monitor app.py
nodemon will monitor files with the extension of .py. However, you can
specify your own list with the -e (or --ext) switch like so:
So what I have to do is launch nodemon with switch like this: -e js,dust or modify the nodemon.json file's ext property to include dust
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
I have an application built in Brunch.io that builds the main framework into app.js, but in my assets folder I have various small coffeescript scripts that need to be compiled individually, and not merged together into one.
Is there a way to compile the CS first and then move it to the public folder like everything else in assets?
I notice that there are some plugins for doing this exact thing with Jade templates (so you can have .jade files in your assets folder). Would this need to be a new plugin?
If there's no obvious way to do it, is there at least a way to define the config file so that it can watch a different folder and compile each .coffee file to it's own .js file, without either joining them all together, or needing to specify each file in the config?
Since there are no answers, here's the (slightly hacky) way I ended up doing it:
I installed the After-Brunch plugin and added these two commands to my config file, which get run after every compile by Brunch:
plugins:
afterBrunch: [
'find public/ -type f -name "*.coffee" -delete'
'coffee --compile --output public app/assets/'
]
So this simply explicitly deletes the .coffee files that Brunch moved to public/, and then compiles all the .coffee files in assets/ and moves them to public/. Hacky but it works fine.
This annoyingly feels quite backwards: it would have felt much cleaner (even if only in my head) to compile those .coffee files that were already moved into public/ by Brunch, but Coffee doesn't have an in-place conversion option (i.e. replacing the files) that I know of, and running the converter on the files in public/ first and then deleting all *.coffee files didn't work, because the delete command executed before the compile command was finished... But again, this distinction is probably just in my head -- it's just as efficient doing it this way.
If anyone has a more Brunch-like solution, that would be great.
I am looking for a simple guide to setting up server-side watching and compiling .less files in a folder using less.js and node.js. Bryan wrote about it in this post.
Unfortunately, the instructions to Server-side usage on lesscss.org are of a little avail to somebody who is new to node.js.
I have tried command line usage: $ lessc styles.less > styles.css.
I have also tried 'watchr' and 'watch-less' and it all works. However, I am looking for a pure node.js + less.js solution. I am sure there is somebody who will be able to plainly explain how to configure node.js and less.js to watch .less files in a folder. Thanks.
I have created demo project to show how it works. You can find it here https://github.com/corpix/watcherDemo
After clone enter project directory and execute npm install to install less Node.js module.
Try running index.js and change .less file into less_files/ directory, modified file will be compiled and placed into css_files/
Honestly, I have seen a lot of the same threads and answers.
If you are like me and don't want any more code bloat than you already have then just download a LESS app for Win/Mac/Nix and it will auto-compile every time you save your .less files.
I honestly think this would put less of a load on the server because you only need to upload your compiled and minified files at this point.
I wrote something that could be what you are looking for. The script will look for .less files in the watch folder and compile them into the output folder. All you need to do is specify the folder you want to watch and the output folder.
node less-watch-compiler.js FOLDER_TO_WATCH FOLDER_TO_OUTPUT
https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler
It skips watching files with names that starts with underscore or a period.
I wrote this for my development process but it should still work on a server. However, you may want to re-consider watching a folder for changes constantly on a live server. It's an expensive operation.
You can use supervisor with -e argument to provide extensions to watch:
nohup supervisor -e 'js|ejs|less' $APP_DIR/app.js 1>$APP_DIR/log/app.log 2>&1 &
echo $! > $APP_DIR/pid/app.pid;
Taken from node-startup script: https://github.com/chovy/node-startup
The simpler version of this command is:
supervisor -e 'js|ejs|less' app.js
I know this is an old post, but came up a few times when I was recently searching for the same thing.
I have forked and updated the code from jonycheung - and have submitted a merge request.
Update: jonycheung has accepted the merge request so his original code is now updated
In the mean time, the code can be found here:
https://github.com/mikestreety/Dead-Simple-LESS-Watch-Compiler
I have also been working on and developing a pure bash script which uses lessc, but does not require a node script to run:
https://github.com/mikestreety/less-watch
Maybe not direct answer. But here is my comment:
Usually we need this watch during the development phase, where we need to change the less file and see the result without the need of re-running the lessc command by every change in less file.
We do this by pure less.js in the in the our html. as below:
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
After the finalizing the development task. You need to run lessc only once.
During development your pages may take a liitle more time to load, But if your site is ajax base, and you add this to your template page, it will not be a big deal.
You can use less-watch-compiler to watch for .less files. You don't need a main file to watch just like grunt. Just install this plugin:
npm install -g less-watch-compiler
or
yarn global add less-watch-compiler
Usage:
less-watch-compiler [options] <source_dir> <destination_dir>
Basic example
root
└──src
│ └── main.less
│ └── aux.less
└──dist
└── main.css
The project can be compiled with the following command:
less-watch-compiler src dist main.less
Basic Example 2
less-watch-compiler.config.json
{
"watchFolder": "src",
"outputFolder": "dist",
"mainFile": "main.less"
}
The project can be compiled with the following command:
less-watch-compiler
Source.