5 Replies - 6104 Views - Last Post: 08 July 2010 - 12:47 PM Rate Topic: -----

#1 mmmmm   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-July 07

Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 01:38 AM

Hi, folks. I'm not a C# programmer, but for now I have the task of translating a short PHP script into C#, and I'm hoping someone here will be able to help me.

The goal of the script is to bundle and minify JS and CSS files on the fly. So, for example, I could write:

<link href="/bundle.aspx?file1.css&file2.css&file3.css">
<script src="/bundle.aspx?file1.js&file2.js&file3.js"></script>

And the response would be each of the requested files concatenated and minified.

But I'm not sure how I should even start. I'm not sure if I should extend System.Web.UI.Page, or if I should implement IHttpModule, or if I should do something else entirely. I'm hoping someone can at least get me started on the right track.

Below is the PHP script I'm working from.

<?php

// Get file list
$files = array();
foreach (explode('&', $_SERVER['QUERY_STRING']) as $file)
{
  $files[] = urldecode($file);
}

/*
TODO: use cache if none of the requested files have been updated since cache was created (check modification times)
*/

// Ensure no funny file paths
foreach ($files as $file)
{
  if (is_file("wwwroot/$file") and strpos(realpath("wwwroot/$file"), realpath('wwwroot')) !== 0)
  {
    bad_request();
  }
}

// Determine if JS, CSS or something else is being requested
$reqJS    = false;
$reqCSS   = false;
$reqOther = false;
foreach ($files as $file)
{
  $file = strtolower($file);
  if (substr($file, -3) == '.js')
  {
    $reqJS = true;
  }
  elseif (substr($file, -4) == '.css')
  {
    $reqCSS = true;
  }
  else
  {
    $reqOther = true;
  }
}

// Ensure only JS or only CSS files are requested
if ($reqJS and $reqCSS or ! $reqJS and ! $reqCSS or $reqOther)
{
  bad_request();
}

// Set header
if ($reqJS)
{
  header('Content-type: text/javascript');
}
else /* assume CSS */
{
  header('Content-type: text/css');
}

// Get file data
$data = '';
foreach ($files as $file)
{
  $file = "wwwroot/$file";
  if (is_file($file))
  {
    $data .= file_get_contents($file);
  }
}

// Compress data
// Fork the java process
$cmd = 'java -jar "' . realpath('bin/yuicompressor.jar') . '" --type ' . ($reqJS ? 'js' : 'css');
$descriptors = array(
  0 => array('pipe', 'r'),
  1 => array('pipe', 'w'),
  2 => array('pipe', 'w')
);
$process = proc_open($cmd, $descriptors, $pipes);
if ($process === false)
{
  internal_server_error();
}

// Feed the data to the compressor
fwrite($pipes[0], $data);
fclose($pipes[0]);

// Read back the compressed data
$compressed = stream_get_contents($pipes[1]);
fclose($pipes[1]);

// Check for errors
$errors = stream_get_contents($pipes[2]);
fclose($pipes[2]);

// Close the process
$exitStatus = proc_close($process);

// Check if unsuccesful
if ($exitStatus != 0 or $errors != '')
{
  internal_server_error();
}

/* TODO: cache compressed output */

echo $compressed;


function bad_request()
{
  header('HTTP/1.1 400 Bad Request');
  exit;
}

function internal_server_error()
{
  header('HTTP/1.1 500 Internal Server Error');
  exit;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Bundle and minify JS and CSS on the fly

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6252
  • View blog
  • Posts: 24,024
  • Joined: 23-August 08

Re: Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 04:17 AM

Moved to ASP.NET
Was This Post Helpful? 0
  • +
  • -

#3 Frinavale   User is offline

  • D.I.C Addict
  • member icon

Reputation: 205
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 06:12 AM

You haven't shown us anything that you have tried to solve this problem....so I'm not sure where to start helping you from.

The first step would be to add the "bundle.aspx" page to your project.
The second step would be to add the JS and CSS files to your project.
The third step would be to read the PHP code and determine the best C# techniques used to accomplish the same task.

Actually, before you do anything you should research this because there may already be tools to help you with this job (I did a quick google search and many tutorials on how to do this came up)

-Frinny

This post has been edited by Frinavale: 08 July 2010 - 06:14 AM

Was This Post Helpful? 0
  • +
  • -

#4 Guest_mmmmm*


Reputation:

Re: Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 10:06 AM

Yes, I tried googling my issue before I came here. I found, for instance, this. But the code provided here is a class, not a production ready package, which means I still need help figuring out how to use it. Also, it doesn't use a local compressor program. It sends a new HTTP request to google's user interface, which isn't ideal.

I also found this, which again seems to be presented as a library rather than a production ready package, which means I don't know how to use it.

I'd love to show you some initial code, but as I said in my post, I'm not a C# programmer. I don't know the framework, so I don't even know how to start. I'm just looking for a little help.
Was This Post Helpful? 0

#5 Frinavale   User is offline

  • D.I.C Addict
  • member icon

Reputation: 205
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 11:11 AM

Well you picked a pretty complex component to start learning ASP.NET/C#!

I don't know where to start from....maybe I'll try explaining what complex about this component.

Typically ASPX (asp.net) pages return HTML to the web browser.
In this case you're going to have to create an ASPX page that returns minified Javascript or CSS to the browser.

That in itself usually confuses people.

The reason why you have to create an ASPX page to do this is because a task (minifying) needs to be done on the Javascript/CSS resources before the web browser can download them....and because the browser needs to access this, it should be done in something like an ASPX page (accessible to the browser).

I think that the complicated aspects of this project are more ASP.NET related than C# specifically. Well you may run into some complexity the actual minifying part because you have to parse Javascript/CSS files and remove unnecessary white space and comments etc....

Maybe you should start with a console application that reads a Javascript file and does the minification first. Then modify it to work with CSS files... Then take this logic and move it into the ASPX page.

-Frinny
Was This Post Helpful? 0
  • +
  • -

#6 Guest_mmmmm*


Reputation:

Re: Bundle and minify JS and CSS on the fly

Posted 08 July 2010 - 12:47 PM

I don't plan to write the minification logic myself. I plan to use the YUI compressor for that (like the PHP script does).
Was This Post Helpful? 0

Page 1 of 1