Developing js while using elixir - javascript

I am developing the js of a laravel-5, AngularJS app right now. I am using elixir to version the css and js files. However while I am developing I don't want to have to have to version my files everytime I want to test something.
What is the best way to use elixir while you are still in active development?
I know you can use gulp watch but won't that create a new compiled version of the code everytime I save? Those files could add up fast.
Related Question: Should I commit the built files to version control?

After having developed with gulp for a few weeks now, gulp watch is really good at quickly recognizing the change and firing a rebuild on the file. Plus, it does delete the previous file.
So, Elixir keeps only 1 compiled version of each file. And it builds them quickly so gulp watch is a good solution.
Personally I think it is a very bad idea to version these files. For one they are always being deleted and recompiled. Lastly it is generated code that can (and should) be generated in production.

Related

Build for js environment without npm?

We are currently building our frontend js codebase (angularjs) using nodejs with grunt, which seems to be a popular setup, but we are not happy with this solution. Does anyone have suggestions for a build setup for e.g. linting, minimizing our js, running less, etc (in addition to some custom steps for angular in general and for our application specifically) without using nodejs at all?
I would leave it at that to avoid starting a flamewar, but here are, for context, some of the shortcomings of the current setup in our view:
grunt does not have even the basic functionality of a 1970s build system, like automatically re-building only files that have been modified based on file modification time
npm is causing constant headaches running on our build servers at every build
If grunt does not have even the basic functionality of a 1970s build system, why won't you use a 1970s build system then?
Just use make if that's what you're happy with. It still works fine. There's no reason not to use it if it you're satisfied with how it works.

how to deal with the dynamic loading of extjs 4 when releasing to server?

I often use the Ext.require() functionality of Extjs which lets the it dynamically load the specific content.
But the documentation specifies that when released to the production environment, the dynamic loading feature should never be used. So how can I deal with so many Ext.requires() in my code? The official doc said that the sencha cmd could solve this problem if you follow the scaffolding. But I didn't know about the sencha cmd when I wrote the code.
So, how should I update my code?
The simplest way to merge all your JS files into a production build (taking care of ExtJS requirements) is to use SenchaCMD.
If you didn't follow CMD practices during development it could be quite hard. Fortunately your JS source code will not be changed, you must only be sure to have defined "requires" attribute correctly instead of using Ext.requires (otherwise it would continue to use dynamic loading...).
It really depends on you project structure and you coding style, but steps are:
Download Sencha CMD (last version)
Create a fresh Sencha app with "sencha generate app"
Add your application start logic in the "launch" method of Application.js (consider adding also all your missing requirements in this class)
Add all your source files in the app folder and try to run "sencha app build" (better if you add a subset of your app, try to build it, eventually fix it, the add another part).
Now you should have 2 new builds: "production build" is a single file minified JS, "testing build" is single file non mified. There is also a "development mode" of sencha CMD that starts a Tomcat server and deploy you application as you are doing now.

Grunt recompile since last run

I have grunt watch setup so when i`m developing my files are automatically compiled, but after I pull i need to "touch" the files in order to trigger recompile the new files in case watch was not running while I pulled, is there a generic way to make grunt track last edit for files without having to "touch" the new files or should i just have grunt watch running before I pull (which while writing this seems like an adequate solution)?
Just have the watch run while you make the pull, or just run the tasks manually--the kind of detailed tracking you're suggesting just seems like overkill to me. Keep it simple!

Compiled javascript files (from typescript) get added to my Visual Studio project

My Visual Studio project has Typescript files. We keep the Typescript files under version control but not the generated Javascript files. The problem is that whenever I change a Typescript file, the Javascript files get added to my solution. It's annoying because I have to manually remove them from the project before checking stuff in. Is there any way to stop this from happening?
Upgrading to the latest version of the TypeScript plugin will easily solve your problem. There have been a LOT of changes since that version. But, for one, the default functionality is to NOT add the js files to the solution.

Bundler for javascript, or how to source control external javascript files

I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).

Categories

Resources