CODEWITHSUNDEEP
javascript
pondermatic
pondermatic

Reputation: 6583

Integrating js in build process

I'm wondering what the best way to minify and concatenate all my js scripts in one in a build process is. I've got the actual minifying working, but now need to set a reference in my html page to the minified file. In the dev version it has references to five files which get concatenated. Should I juts xmlpoke or something like that? Are there more elegant techniques?

Upvotes: 0

Views: 165

Answers (3)

balupton
balupton

Reputation: 48679

You can use Buildr

Create a package.json file in your project's root directory, make it look something like this:

{
    "name": "My Project Name",
    "buildr": {
        "compress": {
            "js": true,
            "css": true,
            "img": false
        },
        "bundle":  {
            "js": true,
            "css": true
        },
        "directories": {
            "out": "./scripts/compressed",
            "src": "./scripts/uncompressed"
        },
        "files": {
            "js": true,
            "css": true,
            "img": false
        }
    }
}

Then run:

buildr

The above will compress and bundle all css and js files in the ./scripts/uncompressed directory to the ./scripts/compressed` directory.

Update: Corrected the URL for Buildr on GitHub.

Upvotes: 0

Narayan Raman
Narayan Raman

Reputation: 891

In your file which includes the script files, do this (using which ever server side technology you use)

<%
if (@IS_DEV@){
%>
  <script src="file1"></script>
  ...
  <script src="file5"></script>    
<%
} else {
%>
  <script src="@MINIFIED_FILE_PATH@"></script>
<%
}
%>

Then use the "replace" ant target in your build file (assuming you use ant) to replace @IS_DEV@ and @MINIFIED_FILE_PATH@

<replace file="yourfile.jsp" token="@IS_DEV@" value="${IS_DEV}"/>
<replace file="yourfile.jsp" token="@MINIFIED_FILE_PATH@" value="${YOUR_MINIFIED_FILE_PATH}"/>

Upvotes: 0

mkoryak
mkoryak

Reputation: 57968

the way i usally do it is concat all the files together, minify using yui:

<target name="compress-js" unless="disable.js.compression">
    <java fork="true" spawn="true" jar="tools/yuicompressor-2.3.6/yuicompressor-2.3.6.jar">
      <arg value="-o" />
      <arg value="${js.home}/lib/lib.js" />
      <arg value="${js.home}/lib/lib.js" />
    </java>
  </target>

and then just have one header that references the compressed file, and used disable.js.compression in dev so that your files dont get compressed.

Upvotes: 3

Related Questions