I'm hoping to use Webpack compile all our less files in /less to /public/css and include them in our server-side templates as regular css (not sticking the text into the using ExtractText plugin or overloading require).
That is, I'm trying to get Webpack + a LESS loader or plugin to glob to compile all the .less files:
/less/foo.less
/less/bar.less
/less/unknown-new-less-file.less
...
and output them to
/public/css/foo.less
/public/css/bar.less
/less/unkown-new-less-file.less
I then want to include them in our app by pulling in css file using
<link rel="stylesheet" href="foo.css">
I tried using a Bash script and lessc instead of Webpack, which worked fine, but won't enable us to automatically re-compile the LESS when the source files change.
The problem was that I was using Webpack as a task runner, which it is not.
I was resisting adding Gulp or Make. Gulp because it turns into a giant unmaintainable mess and Make even though it's great because it's a little hard for teams to learn.
I ended up using something like fswatch in an npm script to re-run lessc.
The Less docs recommend using grunt, Gulp, or dev-mode in-browser parsing: http://lesscss.org/usage/#using-less-in-the-browser-watch-mode.
Instead of webpack, you can use chokidar with lessc.
First, install chokidar: npm install chokidar-cli
Then, use it to watch your less files:
chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"
Chokidar documentation on GitHub
More information about why not to use webpack for compiling less separately: Can I use webpack to generate CSS and JS separately?
Related
I used the bootstrap_package and built an extension with the sitepackage builder. https://www.sitepackagebuilder.com/
Normally the less files are processed when the template constants are edited in the backend(without sitepackage). After installing the sitepackage the backend editing of the constants gets disabled.
I can now work with less files in my own extension to override/extend the standard less/css stuff. But i cant find out how to process the less files to get compiled :(
Has anyone any ideas?
You can try EXT from TYPO3 extensions like https://extensions.typo3.org/extension/ws_less/ or configurate Grunt or Gulp for less and then include ready for use css file. Example of config for compiling https://ericnish.io/blog/compile-less-files-with-grunt/
I am kinda using node_modules folders internally on my package, so I want them compiled by Babel.
NB: I am using the babel-node CLI to start the thing.
v2: Made it work using: "babel-node": "babel-node --only src -- " using a compromise: No code needing to be transformed by Babel outside the src folder. So still, if anybody has better suggestions, please feel free to add an answer.
v1 original answer:
Made it work; this is what it looks like in my npm scripts:
"babel-node": "babel-node --only index\\.js,src -- "
There's also this bug which prevents me from specifying it in the config instead.
If you using babel only options, It should be added "*" glob pattern and other yourself glob pattern.
I use broccoli-less in my ember cli project and would like to use an addon (ember-cli-materialize), which uses broccoli-sass.
After installing the addon, i get: File to read not found or unreadable ../app.scss, because i also have an app.less file in my styles dir.
As i understand, this commit Allow multiple preprocessors per type should make it possible, although i might be missing something. Has anyone managed to use ember-cli with multiple preprocessors, and what changes is needed?
Ember-cli version: 1.13.1
Ember version: 1.12.0
Thanks
I know your circumstance is different than mine but this may help others or spur a better solution. I was added to a dev team to polish up an app already styled using LESS. I favor SASS and tried to use ember-cli-sass alongside ember-cli-less without any success.
You may want to look further into Ember-Cli's add.import
By adding your input configurations to ember-cli-build.js with the above, you can leverage either your bower-components directory (if used) or vendor directory, to import a compiled CSS doc (from Sass source files) that will build alongside the project quite nicely with a simple sass --watch <input:output> command.
The LESS files are ultimately compiled to app.css, and your SASS files to vendor.css (make sure you link to the stylesheet in your index page/template).
I am using requirejs with coffeescript and cs plugin. When I go to production I bundle all using r.js optimizer which uses coffeescript.js to complie my cs files into javascript and put it all in all.js
In runtime, there is no need to the 159K coffeescript files, how can I prevent r.js from pushing it into the bundle and save this huge file space
Use StubModules in requirejs configuration:
stubModules: ['cs','coffee-script']
If you're using this plugin it seems this should just work as part of the build process.
If thats not the case, its easy to set up manually:
In your bundle script, run the coffee executable first to build the coffeescript files to js, and then run r.js on those javascript files to optimize them.
Then you can even delete the temp js files if you like and only keep your single bundled files.
I'd like to play around with integrating coffeescript into my dev process. But as I see it, I'll have to make a bat file that iterates a set of coffee files and spits out js files. Every time I write a bat file, useful as they may be, I ask myself: is there a better way?
Which makes me wonder: is there an app of some sort for Windows that will watch a directory or a file and spit out one/many js files when a coffee file is saved? I'm thinking of building one but don't want to reinvent the wheel. I looked around and found things that were similar but nothing that elevated it beyond "run this command line" on Windows.
Edit: already marked an answer, but looking at this 10 months later the answer is: grunt. Because it'll do a lot more than just auto-compile your coffeescript and you'll probably need to do more than just that to get your app going.
coffee --watch -o lib -c src
where src is a directory containing your coffee files, and lib is your JavaScript output directory.
See update at bottom of post.
I was hunting for the same thing the other day and came across this: https://github.com/danenania/CoffeePy
It's a simple python script that uses PyV8 to run coffee-script.js.
It doesn't do anything fancy, just watches a folder recursively, and compiles any .coffee files whenever they're changed. It doesn't even have a bare option. These things could be very easily added though!
Edit:
I forked the script and added --bare and --output options.
You can get it here: https://github.com/johtso/CoffeePy
Personally, I prefer using build tools like grunt.js / yeoman or brunch for that purpose.
grunt.js
&
grunt coffee
Mindscape Workbench has a built in compiler/editor for VS 2010. Haven't tried it yet, but it looks like it'd be even better than a watcher/compiler. Scott Hanselman has a post about it here:
http://www.hanselman.com/blog/CoffeeScriptSassAndLESSSupportForVisualStudioAndASPNETWithTheMindscapeWebWorkbench.aspx
I think there is a simplier way just using -w option of coffeescript compiler
coffee -c -w *.coffee
This will compile all coffee files under the folder you are (put more file pathes if needed) each time you change one.
Another possibility: WebStorm 6. They've added a built in file-watcher for a variety of next-gen languages like SASS and Coffescript.
If you want a different way of doing it, this might help:
http://jashkenas.github.com/coffee-script/#scripts
If you include the coffeescript compiler on your page, you can include files with a "text/coffeescript" type and they will get compiled client-side.
Word of warning: Obviously, client-side compilation is not for something serious, but its completely fine for a small project/quick development. It would then be trivial to compile them on the server and change the MIME-type and filename when something a bit quicker is necessary.
CoffeeScript-dotnet does what you want, but it is a command line tool.
Command line tool for compiling CoffeeScript. Includes a file system watcher to automatically recompile CoffeeScripts when they change. Roughly equivalent to the coffee-script node package for linux / mac.
Here is the best way to do it:
Say your work is in "my-project-path" folder.
Go to the parent folder of "my-project-path"
Start a terminal and type coffee -o my-project-path -cw my-project-path
This line will watch and compile anything name as "*.coffee" in "my-project-path" folder, even if it is in "my-project-path/scripts/core" or "my-project-path/test/core".The js file will locate in the save folder as the .coffee file.