myradon
myradon

Reputation: 421

folder structure webapp/ website with grunt automation

Currently I want to change my workflow from a Makefile for less-compiling into Grunt along with watcher. I've got a development-server on www.domain.net and a production server on www.domain.nl. I have to manually compile, update code on dev-server and refresh web browser. Also I was struggling with when going from dev- to prod-environment. I had to change files paths, domains and change from dev-js files to minified ones uncomment Analytics-code in html and that kind of stuff. It was/ still is manual labor so prone to human error!

I would like to know how I could setup an environment which just generates development CSS, JS, HTML AND also builds a production directory which includes all necessary files minified and concatenated. Later on I only have to upload folder/ files in directory to production-server and takes all these manual jobs away from me.

What do you guys recommend or what is your workflow?

Upvotes: 0

Views: 352

Answers (1)

Mangled Deutz
Mangled Deutz

Reputation: 11403

This is rather generic, but here is a try.

The first thing you need is indeed a "build system" (or a "task manager"). That sure may be "make", or "grunt". You would then write a gruntfile (or makefile) that would describe every step needed to produce your package, and you would create specific "targets" in that files, that would describe specific options/values depending on wether you are producing a package for development or production ("domain.net" vs. "domain.nl").

Assuming you are going with grunt, you can certainly achieve that with something in the line of:

grunt.initConfig({
  myConfig: grunt.file.readJSON('configurationFile.json')
});

then:

grunt.config('mytask.dev': {
    options: '<%= myConfig.dev %>'
});

grunt.config('mytask.prod': {
    options: '<%= myConfig.prod %>'
});

and configurationFile.json might look like:

{
   'dev': {'domain': 'domain.net'},
   'prod': {'domain': 'domain.com'}
}

With such a setup, you could then:

grunt myTask:dev

or

grunt myTask:prod

to produce a package for a specific environment. Obviously, you would need to use various grunt plugins to do anything useful, and use your options value to replace templated values in your source files.

At that point, at least you could produce a reliable package automatically by just running a single build command.

You absolutely need to read the grunt documentation though: http://gruntjs.com/getting-started

The second part that you would possibly need is a CI server. There are a lot of them around - Jenkins (the venerable), or more recently Strider (http://stridercd.com/).

Installing and configuring one of these would automate your build operations. That is, each time you commit some code, a build is triggered on the CI server, and the new package (assuming the build is a success) is made available.

There as well, you definitely need to read some background documentation on CI (like http://en.wikipedia.org/wiki/Continuous_integration ) and then get dirty with one of them.

Either way, start with grunt and see where that go.

Hope that helps.

Upvotes: 1

Related Questions