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.
Related
I have a JS file from here that I'd like to include in my single-file component.
I can't include the script tag in my template section, as that results in an error.
I also tried:
require('/static/sql.js');
import '/static/sql.js'
etc. following the instructions here.
in the script section of my .vue file, but those either complained that the file couldn't be found, or that the dependency wasn't installed. It's a large JS file (2 MB) so I'd prefer that it not be compiled by Vuejs/webpack. If I do an 'import', what function do I import from sql.js?
Should I instead install the node version of the sql.js library, along with its fs dependency? I would like to serve this as a static webpage, so I don't know if it makes sense to have the 'fs' module in there.
I'm currently just including the script tag in the index.html of my entire app, but would prefer that it just be loaded when I need this specific component.
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 just installed all the required tools for the new Sencha Cmd(Ruby, Compass, Ext Js 4.2 SDK) everything works fine, but I don't know how to obtain the unique obfuscated file from the .js sources in my Ext Js application.
Any help, please? Thanks in advance.
I tried the "sencha app build" command from all the folders in my application path, always get the "Please ensure this command was executed from a valid application directory. Unable to locate 'app.dir' config property from 'sencha.cfg'
After more reading about the subject I think before the "sencha app build" command to work I need to generate the bootstrap.js file manually because my application wasn't generated using the framework, but I'm stuck here also. Anyone ever did that? Please?
The best way to get things work if your have legacy project (when project structure is not generated by sencha cmd tool) is to generate empty project and the move all necessary files/folders in to your existing project and try to adjust all configurations. You will need to move:
.sencha folder
folder with extjs development classes
bootstrap.js, bootsrap.css, build.xml
modify you start page correspondingly (index.html, index.jsp, or whatever)
create application.js to start your application
bootstrap files are always generated automatically. To generate it normally you have to use sencha app refresh command.
Basically the most important changes have to be made in .sencha folder. Most of the config files in this folder have a lot of comments so this is not a problem to understand what to change. Also it's good idea to refer official doc page: Sencha CMD
I'm trying to get some options out of a separate config.coffee into my main app.coffee. The way I try doesn't work somehow, I'm only getting:
ReferenceError: Can't find variable: require
Here are my two files, I really hope you can help me out here.
# app.coffee
config = require './config.coffee'
console.log config.api_key
# config.coffee
exports.config =
api_key: 'MY_SECRET_API_KEY'
oh, I thought if I require another file and compile my app.coffee it gets included.. is there a way to do this or do I have to put everything in one file?
You might want to edit your question to specify this.
There are some projects that let you "require" files and introduce a build step to concatenate and minify them into a single one. Not all of them follow the Common/JS module spec. You can also use AMD based tools to load files asynchronously.
Sprockets
Which uses comments like #= require jquery to require other files and then compiles them into a single file. While it's aimed at Rack based apps, it has a command line tool which you can use to automate the process.
url: https://github.com/sstephenson/sprockets
Snockets
This is based on Sprockets, but it runs on Node.js
url: https://github.com/TrevorBurnham/snockets
Browserify
This is another Node.js based tool.
Make node-style require() work in the browser with a server-side build step, as if by magic!
https://github.com/substack/node-browserify
Require.JS
This is AMD based, so it can load files asynchronously, but it also has an optimizer wich can concatenate files.
I'm sure there are many more. Each have their own way of doing things and you can make them work with CoffeeScript.
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.