Minify CSS and JavaScript

[ximex]

to optimize the load of .css and .js we should minify them.

possible solution: http://gulpjs.com/ Plugins:

• prefix-css: https://www.npmjs.com/package/gulp-autoprefixer/
• minify-css: https://www.npmjs.com/package/gulp-uglifycss/
• minify-js: https://www.npmjs.com/package/gulp-uglify/

this all works with node.js/io.js

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/13279048-minify-css-and-javascript?utm_campaign=plugin&utm_content=tracker%2F10474012&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F10474012&utm_medium=issues&utm_source=github).

[Fasse]

I don't know if this is useful for our small js and css script. The css should not be minified so it's easier for people to change it and it has only 16kb. Our only js files also have less than 10kb. So in my opinion there is no need to use this for Admidio. It only increases the complexity if you want to change something.

[ximex]

this doesn't mean that you don't have a normal version of the css and js file. this minify process is like a build process. you still have your source code but get a binary too.

here you have your normal file like admidio.css and get a other file like admidio.min.css. if you want to change something you did this in the original admidio.css file and start the "building-process". and than we only use the *.min.css files.

advantages you could get of this are: css

• use style languages like less, stylus or sass (mixings, variables, ...)
• let the building-process automatically set the vendor prefixes
• minify them
• merge files into one

PS: bootstrap use less and sass and compile it with this techniques

javascript

• use other languages like typescript, coffeescript or dart (compiles it to ECMAScript 5 etc)
• use the new ECMAScript 6 (compiles it to ECMAScript 5 etc)
• minify them
• merge files into one

ECMAScript 5 is the normally known Javascript https://kangax.github.io/compat-table/es6/ (look at the top for links to ECMA 5 and 7)

(I only use ECMAScript 5 or 6 and don't like to use coffeescript etc)

by the way: do we use the normalize.css anywhere? (https://necolas.github.io/normalize.css/) Edit: ok it's already in bootstrap (http://getbootstrap.com/css/#overview-normalize)

[ximex]

Here my code for the gulpfile.js file to "build" the css from less (less -> autoprefixer -> minify)

// gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var pathTheme = './adm_themes/modern/';

gulp.task('css', function () {
    gulp.src(pathTheme + 'css/*.less')
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest(pathTheme + 'css/'))
        .pipe(minify())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest(pathTheme + 'css/'));
});

[Fasse]

But the webmaster who uses admidio and dont know about LESS or gulp should simply edit the readable admidio.css and See the result in the browser.

Thats why I dont like the minified for admidio.css

[ximex]

look at #80 to see what browsers we should support with autoprefixer

[Fasse]

We should not minify our css or js until the scripts are only so small.

[ximex]

But the webmaster who uses admidio and dont know about LESS or gulp should simply edit the readable admidio.css and See the result in the browser.

here i can say: the webmasters don't know anything about how the classes works e.g.

this is only an option. you could also do it in the old way. but why won't we give them an other possibility?

and for this we put in a little documentation so everyone could do this. It's nearly the same as here: http://getbootstrap.com/getting-started/#grunt

• install nodejs
• run npm install
• run grunt TASKNAME
• finish

[Fasse]

For me it's no option to use this, because it's more work for developers, releases and webmasters. I don't want to create these files at each release. A release is a lot to do for my freetime. And you arguement that webmasters dont know anything about our css is not true. There are a lot of people who do some tweaks on our css and I dont want theme to see a minified css. I'm happy if people do something with our css and there should be no more difficults for them.

[ximex]

@Fasse i din't mean the css classes :wink: i mean the classes in adm_program/system/classes. I think you still not know what i'm thinking about :wink:

if we use this, the "normal users" which didn't know something about "less", "gulp" etc, they could still make changes in the normal admidio.css file. but the core developers would get a more powerful tools and language.

I think developers should go with the time of the new technologies they are coming up. In nearly all other projects i help, they use some of this technologies. I only want to make the life easier for us. And yes, at the beginning you have to learn something new. but it's really easy.

It's also possible to automate some other tasks with "gulp" etc. like making a git release, load a file via ftp on a server, ...