switch from Assetic to gulp

Author: bicpi

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "vendor/bower_components"
+}

.gitignore

@@ -1,5 +1,9 @@
 vendor/
 node_modules/
-src/config/parameters.yml
+src/App/Resources/config/parameters.yml
+src/App/Resources/assets/rev-manifest.json
 ansible/inventories/*
 ansible/inventories/group_vars/*
+/web/css
+/web/js
+/web/font

ansible/roles/app/tasks/main.yml

@@ -6,6 +6,9 @@
     - name: Run NPM
       sudo: false
       shell: /usr/bin/npm install chdir={{ project_root }}
+    - name: Run bower
+      sudo: false
+      shell: /usr/local/bin/bower install chdir={{ project_root }}
     - name: Copy parameters.yml file
       sudo: false
-      template: src=parameters.tpl dest={{project_root}}/src/config/parameters.yml mode=644
+      template: src=parameters.tpl dest={{project_root}}/src/App/Resources/config/parameters.yml mode=644

bower.json

@@ -0,0 +1,12 @@
+{
+  "name": "bicpi-homepage",
+  "version": "0.0.0",
+  "authors": [
+    "Philipp Rieber <[email protected]>"
+  ],
+  "dependencies": {
+    "jquery": "~1.9.1",
+    "font-awesome": "~3.2.1",
+    "bootstrap-sass": "v2.3.2.2"
+  }
+}

dump-assets

@@ -0,0 +1,132 @@
+var gulp = require('gulp');
+var plugins = require('gulp-load-plugins')();
+var del = require('del');
+var Q = require('q');
+
+var config = {
+    assetsDir: 'src/App/Resources/assets',
+    sassPattern: '**/*.scss',
+    production: !!plugins.util.env.production,
+    sourceMaps: !plugins.util.env.production,
+    bowerDir: 'vendor/bower_components',
+    revManifestPath: 'src/App/Resources/assets/rev-manifest.json'
+};
+var app = {};
+
+app.addStyle = function(paths, outputFilename) {
+    return gulp.src(paths)
+        .pipe(plugins.plumber())
+        .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.init()))
+        .pipe(plugins.sass())
+        .pipe(plugins.concat('css/'+outputFilename))
+        .pipe(config.production ? plugins.minifyCss() : plugins.util.noop())
+        .pipe(plugins.rev())
+        .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.write('.')))
+        .pipe(gulp.dest('web'))
+        // write the rev-manifest.json file for gulp-rev
+        .pipe(plugins.rev.manifest(config.revManifestPath, {
+            merge: true
+        }))
+        .pipe(gulp.dest('.'));
+};
+
+app.addScript = function(paths, outputFilename) {
+    return gulp.src(paths)
+        .pipe(plugins.plumber())
+        .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.init()))
+        .pipe(plugins.concat('js/'+outputFilename))
+        .pipe(config.production ? plugins.uglify() : plugins.util.noop())
+        .pipe(plugins.rev())
+        .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.write('.')))
+        .pipe(gulp.dest('web'))
+        // write the rev-manifest.json file for gulp-rev
+        .pipe(plugins.rev.manifest(config.revManifestPath, {
+            merge: true
+        }))
+        .pipe(gulp.dest('.'));
+};
+
+app.copy = function(srcFiles, outputDir) {
+    return gulp.src(srcFiles)
+        .pipe(gulp.dest(outputDir));
+};
+
+var Pipeline = function() {
+    this.entries = [];
+};
+Pipeline.prototype.add = function() {
+    this.entries.push(arguments);
+};
+
+Pipeline.prototype.run = function(callable) {
+    var deferred = Q.defer();
+    var i = 0;
+    var entries = this.entries;
+
+    var runNextEntry = function() {
+        // see if we're all done looping
+        if (typeof entries[i] === 'undefined') {
+            deferred.resolve();
+            return;
+        }
+
+        // pass app as this, though we should avoid using "this"
+        // in those functions anyways
+        callable.apply(app, entries[i]).on('end', function() {
+            i++;
+            runNextEntry();
+        });
+    };
+    runNextEntry();
+
+    return deferred.promise;
+};
+
+gulp.task('styles', function() {
+    var pipeline = new Pipeline();
+
+    pipeline.add([
+        config.assetsDir+'/css/bootstrap.less',
+        config.bowerDir+'/font-awesome/css/font-awesome.css',
+        config.assetsDir+'/css/styles.scss'
+    ], 'main.css');
+
+//    pipeline.add([
+//        config.assetsDir+'/sass/dinosaur.scss'
+//    ], 'dinosaur.css');
+
+    return pipeline.run(app.addStyle);
+});
+
+gulp.task('scripts', function() {
+    var pipeline = new Pipeline();
+
+    pipeline.add([
+        config.bowerDir+'/jquery/jquery.js',
+        config.assetsDir+'/js/bootstrap.min.js',
+        config.assetsDir+'/js/main.js'
+    ], 'site.js');
+
+    return pipeline.run(app.addScript);
+});
+
+gulp.task('fonts', function() {
+    return app.copy(
+        config.bowerDir+'/font-awesome/font/*',
+        'web/font'
+    );
+});
+
+gulp.task('clean', function() {
+    del.sync(config.revManifestPath);
+    del.sync('web/css/*');
+    del.sync('web/js/*');
+    del.sync('web/fonts/*');
+});
+
+gulp.task('watch', function() {
+    gulp.watch(config.assetsDir+'/'+config.sassPattern, ['styles']);
+    gulp.watch(config.assetsDir+'/js/**/*.js', ['scripts']);
+});
+
+gulp.task('default', ['clean', 'styles', 'scripts', 'fonts', 'watch']);

gulpfile.js

@@ -1,9 +1,19 @@
 {
   "name": "bicpi-homepage",
   "description": "The bicpi homepage",
-  "dependencies": {
-    "uglify-js2": "*",
-    "uglifycss": "*",
-    "less": "<2.0.0"
+  "devDependencies": {
+    "del": "^1.1.1",
+    "gulp": "^3.8.11",
+    "gulp-concat": "^2.5.2",
+    "gulp-if": "^1.2.5",
+    "gulp-load-plugins": "^0.8.1",
+    "gulp-minify-css": "^0.5.1",
+    "gulp-plumber": "^1.0.0",
+    "gulp-rev": "^3.0.1",
+    "gulp-sass": "^1.3.3",
+    "gulp-sourcemaps": "^1.5.0",
+    "gulp-uglify": "^1.1.0",
+    "gulp-util": "^3.0.4",
+    "q": "^1.2.0"
   }
 }

package.json

@@ -0,0 +1,11 @@
+/* import bootstrap components from bootstrap-dedicated folder */
+@import "../../../vendor/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap";
+@import "../../../vendor/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap-responsive";
+
+/* custom settings that deviate from Bootstrap's default values */
+$sansFontFamily: "Trebuchet MS", Tahoma, sans-serif, Arial;
+$baseLineHeight: 18px;
+$navbarBackground: #E9F2F9;
+$navbarText: #407AB1;
+$navbarLinkColor: #407AB1;
+$heroUnitBackground: #BEDCF4;

src/App/Resources/assets/css/bootstrap.scss

@@ -14,6 +14,7 @@
     <link rel="apple-touch-icon-precomposed" href="http://philipp-rieber.net/apple-touch-icon-precomposed.png" />
     <link type="text/plain" rel="author" href="/humans.txt">
     <link href="/all.css" rel="stylesheet">
+    <link href="{{ 'css/main.css'|asset_version }}" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon.ico" type="image/ico">
     <!--[if lt IE 9]>
     <script src="html5shiv.js"></script>
@@ -296,7 +297,7 @@
     </div>
 </footer>
 
-<script src="/all.js"></script>
+<script src="{{ 'js/site.js'|asset_version }}"></script>
 <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-19245446-3']);

src/assets/css/styles.scss src/App/Resources/assets/css/styles.scss

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Twig;
+
+class AssetVersionExtension extends \Twig_Extension
+{
+    private $appDir;
+
+    public function __construct($appDir)
+    {
+        $this->appDir = $appDir;
+    }
+
+    public function getFilters()
+    {
+        return array(
+            new \Twig_SimpleFilter('asset_version', array($this, 'getAssetVersion')),
+        );
+    }
+
+    public function getAssetVersion($filename)
+    {
+        $manifestPath = $this->appDir.'/Resources/assets/rev-manifest.json';
+        if (!file_exists($manifestPath)) {
+            throw new \Exception(sprintf('Cannot find manifest file: "%s"', $manifestPath));
+        }
+
+        $paths = json_decode(file_get_contents($manifestPath), true);
+        if (!isset($paths[$filename])) {
+            throw new \Exception(sprintf('There is no file "%s" in the version manifest!', $filename));
+        }
+
+        return $paths[$filename];
+    }
+
+    public function getName()
+    {
+        return 'asset_version';
+    }
+}

src/assets/img/favicon.psd src/App/Resources/assets/img/favicon.psd

@@ -4,6 +4,7 @@
 
 use Symfony\Component\Yaml\Yaml;
 use Gregwar\Captcha\CaptchaBuilder;
+use App\Twig\AssetVersionExtension;
 
 function shuffle_assoc(&$array) {
     $keys = array_keys($array);
@@ -20,7 +21,7 @@ function shuffle_assoc(&$array) {
 }
 
 $app = new Silex\Application();
-$app['parameters'] = Yaml::parse(__DIR__.'/../src/config/parameters.yml');
+$app['parameters'] = Yaml::parse(__DIR__.'/../src/App/Resources/config/parameters.yml');
 $app['debug'] = $app['parameters']['debug'];
 if ($app['debug']) {
     ini_set('display_errors', true);
@@ -30,10 +31,15 @@ function shuffle_assoc(&$array) {
 $app->register(
     new Silex\Provider\TwigServiceProvider(),
     array(
-        'twig.path' => dirname(__DIR__) . '/src/views',
+        'twig.path' => dirname(__DIR__) . '/src/App/Resources/views',
         'twig.form.templates' => array('form_div_layout.html.twig', 'form_layout.twig')
     )
 );
+$app['twig'] = $app->extend("twig", function (\Twig_Environment $twig, Silex\Application $app) {
+    $twig->addExtension(new AssetVersionExtension(dirname(__DIR__) . '/src/App'));
+
+    return $twig;
+});
 $app->register(new Silex\Provider\SwiftmailerServiceProvider(), array(
     'swiftmailer.options' => array(
         'host' => $app['parameters']['mailer_host'],
@@ -156,7 +162,7 @@ function (Symfony\Component\HttpFoundation\Request $request) use ($app) {
             }
         }
 
-        $skillsRaw = \Symfony\Component\Yaml\Yaml::parse(dirname(__DIR__).'/src/config/skills.yml');
+        $skillsRaw = \Symfony\Component\Yaml\Yaml::parse(dirname(__DIR__).'/src/App/Resources/config/skills.yml');
         $skills = array();
         foreach ($skillsRaw as $weight => $skillGroup) {
             foreach ($skillGroup as $skill) {