Webpackはcssや画像などをjsにまとめるような仕組みがあるのですが、ちょっとモリモリな感じがして導入がしずらいかなと思いました。
そこで少し簡単な方法でまとめる方法がないか検討してみました。
こちらの記事を書いた時にやりたいことがいちまいわからないと言われたので、
パッケージングにフォーカスして再投稿です。
css/
hoge.css
js/
fuga.js
test.js
とつくっていたものを以下のように1ファイルにします。
all.js
webpackでやっているようなことを手軽にやるようなイメージです。
handlebarsを使ってcssをjsに変換
handlebarsはテンプレートエンジンなのです。
プリコンパイルするとhtmlやcssを変数展開してくれるので
こちらを使います。
precompileをするとcssやhtmlをjs変数に保持してくれます。
cssをprecomplieしてjsの変数に持たせます。
style.hbs
<style type="text/css">
.hoge {
background-color: #fff;
}
.hoge:hover {
border: 1px solid #0097cf;
}
</style>
cssをstyleタグで囲みます。
gulpやgruntでプリコンパイル
ここではgulpを使ってさきほど書いたsytleファイルをprecomplieし、
テンプレートがはいったjsを生成します。
//cssをテンプレートに変換
gulp.task('templates', function(){
var src = "./src/css/";
var dest = src+'/build';//出力場所
gulp.src(src+'/*.css')
.pipe(handlebars())
.pipe(wrap('Handlebars.template(<%= contents %>)'))
.pipe(declare({
namespace: 'App.css',
noRedeclare: true // Avoid duplicate declarations
}))
.pipe(concat('style.js'))
.pipe(gulp.dest(dest));
});
1ファイルにまとめる。
上記で生成したstyle.jsとその他のjsを結合します。
ここでは圧縮化もこのタイミングでかけてしまいます。
gulp.task('concat', function() {
var dest = './dest';//結合したファイルの展開先
var files = ['./src/css/build/style.js','./src/*.js'];//cssとjsを1ファイルに結合
gulp.src(files)
.pipe(sourcemaps.init())
.pipe(concat('all.js'))
.pipe(uglify()) //ついでに圧縮
.pipe(gulp.dest(dest));
});
requireするモジュールたち
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
htmlに設置
htmlの頭ほうに以下ような記述を書いてstyleを生成します。
<body>
<script type="application/javascript">
$("body").append(App.css.style);
</script>
jsは以下にロードする。
今回はやっていませんが、htmlもなども同じ方法でまとめることができます。
もうちょっと工夫すれば色々できそうです。