Aus vielen Javascript und CSS Dateien eine HTML Datei compilieren

[Gast]

Hallo Forum,

Ich habe eine HTML Seite in der eine Vielzahl an CSS Dateien aber auch JS Dateien importiert werden.

Zur Entwicklungslaufzeit absolut super. Jetzt müsste die HTML Datei mit allen Ihren Javascript Methoden (von Jquery, über Knockout) und der Vielzahl an CSS Dateien in ein existierendes Projekt integriert werden. Das Problem ist, dass das Projekt selbst eine eigene Struktur hat und somit die .js Pfade und CSS Pfade nicht korrekt sind. Außerdem existiert eine Art Template, in das die HTML Seite nun eingebunden werden soll (sprich.. Im Template selbst befinden sich schon verweise zu JS und CSS und und und).

Meine konkrete Frage ist: Kann man es irgendwie (ohne selbst alles per Copy Paste) hinkriegen, dass aus diesen vielen Dateien eine einzige HTML Datei wird? Per Hand wäre es ja möglich, indem ich alles in die HTML Datei kopiere. Würde das natürlich gerne automatisch machen.

Zur Entwicklungslaufzeit: Alles so lassen wie es ist
Beim Deployen: Generierung einer HTML Datei in der der ganze JS und CSS integriert sind.

Um vielleicht nochmal deutlicher zu werden. Wenn man sich den Quellcode z.B. von ublock.org (ist keine Werbung, hier ist es mir nur sofort aufgefallen. Darf gerne von einem Mod geändert werden), dann sieht man hier auch, dass alles integriert ist. Sowas hätte ich auch gerne.

Danke

[Argo Zero]

Soll ein CMS verwendet werden? Bei TYPO3 kannst du das zum Bleistift einfach mergen.

[Gast]

Nein. Es ist ein komplexes ASP MVC Projekt.
Es ist also kein reines Webprojekt. Ich möchte ungern (Bilder, CSS, Javascript) und die HTML Seite in verschiedene Ordner dort integrieren. Die Seite von mir ist es im Prinzip nicht wert, dass ich so viele Bereiche berühre.

Bei der oben gennanten Seite werden ja sogar Bilder als Base64 mitintegriert. Da ich auch nur 2 Bilder habe (größte von wenigen Kbytes) würde ich sowas z.B. auch gerne machen.

[Pinoccio]

Du könntest mit HTML5 Boilerplate (https://html5boilerplate.com/) nach diesem Turorial (http://code.tutsplus.com/tutorials/automated-optimization-with-html5-boilerplate-build--net-17679) zumindest alle JS und CSS Dateien in je eine packen. (Glaube ich zumindest, selbst nie probiert.)
Dann musst du nicht so viel kopieren.

mfg

[Yavion]

Scripte und Styles zu konkatenieren und ggf. zu minimieren ist in der Web-Entwicklung ein verbreitetes Vorgehen.
Die meisten Lösungen, die ich kenne benutzen dafür einen Task-Runner, wie gulp oder grunt. Diese werden dann mit Plugins ("contribs") für eben diese Aufgaben erweitert.
Im Falle von Grunt könnte z.B. sowas hier helfen:
https://github.com/spatools/grunt-html-build

Aber es gibt auch einen ganzen Haufen an Alternativen.
Entsprechende Projekte, die sowas integrieren, kann man sich z.B. mit Yeoman einfach erstellen oder man clont sie sich aus Github. Dann kann man das ganze gleich in Aktion sehen und hat schon mal eine gute Grundlage für die Konfiguration der Tasks.

[z3ck3]

grunt oder gulp (also mit nodejs) ist das tool der wahl. Man kann sich aber auch in jeder anderen Sprache Scripte erstellen die die aufgabe erfüllen. Ich persönlich hätte das aber von anfang an eingeplant. Wer arbeitet heute denn noch mit purem CSS? :D

gulpfile.js

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
util = require('gulp-util'),
path = require('path'),
fs = require('fs'),
each = require('foreach'),
plumber = require('gulp-plumber'),
notify = require('gulp-notify'),
clean = require('gulp-clean'),
gzip = require('gulp-gzip');

/**
* Main Configuration
*/
var templatePath = 'app/Resources/template/';
var destPath = 'web';

/**
* Helper
*/
var rdir = './';

var __dirname = __dirname || null;
if (__dirname === null) {
throw "[Error] __dirname not defined";
}

var tPath = function (tail) {
return path.join(__dirname, templatePath, tail||'');
};

var rPath = function (tail) {
return path.join(rdir, tail||'');
};
var dPath = function (tail) {
return path.join(rdir, destPath, tail||'');
};

/**
* Test if Dest Path exist
*/
try {
stats = fs.lstatSync(dPath());
if (!stats.isDirectory()) {
throw 'Error';
}
} catch (e) {
throw "[Error] " + dPath() + " is not a Directory";
};

/**
* Assets
*/
var js = {
early: {
source: [
// tPath('bower_components/modernizr/modernizr.js'),
tPath('js/early/**/*.js')
],
dest: 'js/'
},
async: {
source: [
// tPath('bower_components/jquery/dist/jquery.js'),
tPath('js/async/**/*.js')
],
dest: 'js/'
}
};

var css = {
source: [
tPath('scss/**/*.scss')
],
dest: 'css/',
importPath: [
'bower_components/foundation/scss'
],
project: tPath()
};

/**
* Javascript Task
*/
gulp.task('scripts', function()
{
for (var group in js)
{
gulp.src(js[group].source)
.pipe(plumber())
.pipe(concat(group + '.js'))
.pipe(gulp.dest(dPath(js[group].dest)))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gzip())
.pipe(gulp.dest(dPath(js[group].dest)))
.on('error', util.log);
}
});

/**
* Stylesheets Task
*/
gulp.task('styles', function()
{
gulp.src(css.source)
.pipe(plumber())
.pipe(compass({
project: css.project,
css: tPath('stylesheets'),
sass: rPath('scss'),
images: tPath('images'),
import_path: css.importPath
}))
.pipe(gulp.dest(dPath(css.dest)))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gzip())
.pipe(gulp.dest(dPath(css.dest)))
.on('error', util.log);
});


/**
* Watch Task
*/
gulp.task('watch', function()
{
// Watch Scripts
for (var group in js) {
gulp.watch(js[group].source, ['scripts']);
}

// Watch CSS
var cssSources = css.source;
each(css.importPath, function(value){
cssSources.push(path.join(css.project, value, '**/_*.scss'));
});
gulp.watch(cssSources, ['styles']);
});

/**
* Build Task
*/
gulp.task('build', ['styles', 'scripts']);

/**
* Default Task
*/
gulp.task('default', ['build']);


package.json

{
"name": "Whatever",
"version": "1.0.0",
"description": "gg hf gl",
"main": "gulpfile.js",
"dependencies": {
"foreach": "^2.0.5",
"fs": "0.0.2",
"gulp": "^3.9.0",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.0",
"gulp-gzip": "^1.2.0",
"gulp-minify-css": "^1.2.1",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.0",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.6",
"path": "^0.12.7"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "You",
"license": "ISC"
}


sollte eigentlich laufen. Habs grad nur ein wenig zusammen gekürzt. Das Script setzt sass, compass und nodejs vorraus, und optional bower. Generell ist meiner Meinung dazu zu raten einen Package Manager zu nutzen.

Installation:
$ npm install

Und die Pfadangaben anpassen und die Assets hinzufügen. Danach einfach nur

$ gulp

um CSS und JS zu "compilieren". Wärend der Entwicklung geht das automatisch mit

$ gulp watch


nodejs ist nicht mein Fachgebiet. Aber es reicht aus um entsprechende kleine Helferlein zu schreiben die einem bei der CSS/JS/HTML Entwicklung sehr behilflich sind. Von einer Lösung über das Framework oder das eingesetzte CMS bin ich lange weg. Wenn man es schlau genug anstellt kann man so teile des Templates auch in andere Teilprojekte nutzen. Bzw. man kann erst wunderbar nur das Template erstellen mit alllen grundlegenden Elementen. Auch, und gerade im Team, ist das so perfekt.

[robobimbo]

wenn du schon asp.net mvc verwendest, warum dann nicht den dort integrierten bundlink-mechanismus verwenden?

ist nicht unbedingt die eleganteste, aber funktioniert out-of-the-box

http://www.asp.net/mvc/overview/performance/bundling-and-minification

[Gast]

Viele neue Hinweise.

Vielen Dank. Ich werde mir alle einmal genauer anschauen.