Automated tool to join multiple style sheets (CSS) into 1 and to join Scripts (JS) into 1 Sheet only

Asked

Viewed 3,935 times

4

I searched the internet for ways to join Stylesheet CSS and Script Sheets JS in an automated way, however, I did not obtain good results.

I own about 17 Style Sheets and 15 Scripts, if I do it manually I will be "crazy" and take a long time.

Does anyone know of an online tool or software that enables me to do this in an automated way?

Ex: Send all files (sheets) to the website and already download the file with the sheets already attached, or some software that does it in an automated way.

javascript jquery css
  • 3

    Take a look at the Grunt

  • @Rodrigo turn your comment into response.

  • 1

    in small applications I use the cat and if I name the files with numeric prefix I get the order I want in the compiled file

  • @neoprofit that cat? Turn your comment into a reply! D

  • 1

    @Alexandrelopes I did as you suggested. Thank you

4 answers

2

I will give a simple answer, which in no way caters to large projects, and resolves compilation and file reduction, but which I use in small projects.

See the example tree:

root
   js/
     - compilado.js
     src/
        - 01-core.js
        - 02-functions.js
        - 03-extra.js

To generate compilado.js:

cd js;
cat src/*.js > compilado.js

The same can be done with the css

  • I don’t get it. How do you do it? Through a program? o. The

  • 1

    cat and cd are programs from the command line *Nix (Linux and Mac) but which you can install on Windows, if that’s your case.

  • Thank you!......

1

  • Very cool! I didn’t know this extension of Visual Studio. :D

1

A few days ago I’m using a tool called Gulp, which in a simple way you can create tasks to automate this build process.
One of the most common tasks is to concatenate both JS and CSS files, which is your case.

Take a look at these links:
* Gulp Getting Started - https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#Getting-Started
* Gulp Concat - https://github.com/wearefractal/gulp-concat

If you get the right to concatenate the files, it might also be a good idea to make the minification so that they decrease in size, look for Gulp Uglify and Gulp Minify CSS.

I hope I’ve given you new ideas,
André

1


Log in to this site and upload multiple files.

http://refresh-sf.com/yui/

Soon the site will be moved, there is a new address being informed on the page, add to your favorites.

  • Very good! Excellent! But the bad thing is that they are willing to take the site and put another without many functions. From what I saw the new site will only serve to minify the leaves. sad :( But I will use it long before it happens :D

  • 1

    It looks like it’s just gonna be visual!

  • Hope so! Only I saw that you won’t get Yui Compressor

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.