Skip to content

Instantly share code, notes, and snippets.

@coa00

coa00/file0.txt

Last active August 26, 2015 05:14
Show Gist options
  • Save coa00/8cd7cb9328f9fb3125a1 to your computer and use it in GitHub Desktop.
Save coa00/8cd7cb9328f9fb3125a1 to your computer and use it in GitHub Desktop.
Download ZIP
cssファイルをjavascriptにまとめる。 ref: http://qiita.com/coa00@github/items/8ea2c233afd9c1e50cfd
Raw
file0.txt
css/
hoge.css
js/
fuga.js
test.js
Raw
file3.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));
});
Raw
file4.txt
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));
});
Raw
file5.html
<body>
<script type="application/javascript">
$("body").append(App.css.style);
</script>
jsは以下にロードする。
Raw
file5.txt
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
Raw
file6.html
<body>
<script type="application/javascript">
$("body").append(App.css.style);
</script>
jsは以下にロードする。
Raw
style.hbs
<style type="text/css">
.hoge {
background-color: #fff;
}
.hoge:hover {
border: 1px solid #0097cf;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment