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.
Related
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?
I'm using the babel command with the --watch flag to transpile my code. However, when I move or rename a file, the old version of the file remains in the output directory. Is there any way to tell babel to do a clean when something like this happens or should I just switch to chokidar and do it myself?
Take a look at gulp-babel-wrap package
Seems like first option from Available tasks: section makes what you need - clean - wipes the destination directory (default 'dist'
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).
Anyone know if there's a way to browse Mocha tests (in CoffeeScript)via Sublime Text 2 symbols list? Ideally there'd be a plugin, but I'd be fine with editing my CoffeeScript plugin to look for describe and it. I don't know how the whole tmLanguage thing works, could someone show me how to do it or let me know the code to add.
It'd be super rad to navigate my testes using ST2 symbols list!
Thanks!
Although CoffeeScript has a good coloring support in ST2, it's pretty bad in Go To Symbol panel.
I've created a fork of original plugin, where (along with some other cosmetic changes) it shows all classes and functions defined in a file, as well as some known method invocation such as 'describe', 'it' for Mocha and 'app.get', 'app.post', etc for Express.
Currenly it looks like this:
You can see the changes diff on GitHub.
To install it, either download the package and unzip its contents to your Packages/CoffeeScript directory, or git clone it (dont forget to close ST2 beforehand):
cd <user directory>/Packages
rm -r CoffeeScript
git clone -b correct-goto-symbols git://github.com/ashtuchkin/CoffeeScript-Sublime-Plugin.git CoffeeScript
I've also added it as a pull request to the original plugin author, so lets hope it will be in standard package soon.
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.