Life After Assetic: State of the Art Symfony 2 Frontend Dev

Life After Assetic: State of the Art Symfony 2 Frontend Dev

Assetic is a great tool. It helps us build our SASS and LESS files and minimises our JavaScript. But with Assetic we still have to do a lot of manual work. There are better ways to automate our frontend workflow. With Gulp and Bower, we can ditch Assetic and get to grips with the latest and greatest. We will go through how to automate and optimise our Symfony2 frontend workflow in a more efficient manner than we have ever done before.

01da6d807a29ad6d49801c0157518148?s=128

Michelle Sanver

November 28, 2014
Tweet

Transcript

  1. 19.

    @michellesanver Table Of Contents • Assetic - Symfony2 front-end manager

    • Bower - Front-end package manager • Gulp - A modular task runner • Gulp + Bower in Symfony2 • Life After Assetic
  2. 52.

    @michellesanver Using Bower bower.init would you like to mark this

    package as private which prevents it from being accidentally published to the registry?
  3. 82.

    @michellesanver An example workflow • Find all the files being

    used • Minify them • Concat them • Save them • Replace the references in our templates
  4. 89.

    @michellesanver Add directives <!-- build:css /css/site.css -->
 <link href="/bower_components/bootstrap/dist/ css/bootstrap.css"

    rel="stylesheet">
 <link href="/bower_components/bootstrap/dist/ css/bootstrap-theme.css" rel="stylesheet">
 <!-- endbuild -->
  5. 91.

    @michellesanver Add directives <!-- build:js /js/site.js -->
 <script type="text/javascript" src=“/

    bower_components/jquery/dist/jquery.js"> </script>
 <script type="text/javascript" src="/ bower_components/bootstrap/dist/js/ bootstrap.js"></script>
 <!-- endbuild -->
  6. 92.

    @michellesanver Pull in modules var gulp = require('gulp');
 var usemin

    = require('gulp-usemin');
 var uglify = require('gulp-uglify');
 var minifyCss = require('gulp-minify-css');
  7. 93.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  8. 94.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  9. 95.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  10. 96.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  11. 97.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  12. 98.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  13. 99.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  14. 100.

    @michellesanver Define our default task gulp.task('default', function() {
 gulp.src('src/templates/layout.src.tpl')
 .pipe(usemin({


    assetsDir: 'public',
 css: [minifyCss(), 'concat'],
 js: [uglify(), 'concat']
 }))
 .pipe(gulp.dest('public'));
 });
  15. 101.

    @michellesanver Running gulp $ gulp [09:11:05] Using gulpfile /path/to/gulpfile.js [09:11:05]

    Starting 'default'... [09:11:07] Finished 'default' after 2.01 s
  16. 104.

    @michellesanver Cleaning up our template var rename = require('gulp-rename');
 var

    rimraf = require('del');
 
 gulp.task('fix-template', ['minify'], function() { return gulp.src('public/layout.src.tpl')
 pipe(del())
 pipe(rename("layout.tpl"))
 pipe(gulp.dest('src/templates'));
 });
  17. 107.

    @michellesanver Task Dependency $ gulp fix-template [16:48:29] Using gulp file

    /path/to/gulpfile.js [16:48:29] Starting 'minify'... [16:48:29] Finished 'minify' after 44 ms [16:48:29] Starting 'fix-template'... [16:48:29] Finished 'fix-template' after 6.14 ms
  18. 115.

    @michellesanver Moving Stuff var replace = require('gulp-replace');
 
 gulp.task('fix-paths', ['minify'],

    function() {
 gulp.src('public/css/site.css')
 .pipe(replace('../', '../bower_components/ bootstrap/dist/'))
 .pipe(gulp.dest('public/css'));
 });
  19. 119.

    @michellesanver Automatisation: Watch gulp.task('watch', ['default'], function() {
 var watchFiles =

    [
 'src/templates/layout.src.tpl',
 'public/bower_components/*/dist/js/*.js',
 '!public/bower_components/*/dist/js/*.min.js',
 'public/bower_components/*/dist/*.js',
 'public/bower_components/*/dist/css/*.css',
 '!public/bower_components/*/dist/css/*.min.css',
 'public/bower_components/*/dist/font/*'
 ];
 
 gulp.watch(watchFiles, ['default']);
 });
  20. 120.

    @michellesanver Automatisation: Watch $ gulp watch [23:05:01] Using gulpfile /path/to/gulpfile.js

    [23:05:01] Starting 'watch'... [23:05:01] Finished 'watch' after 30 ms
  21. 132.

    @michellesanver Let’s look at our gulp file! var gulp =

    require('gulp'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var cssmin = require('gulp-cssmin');
  22. 134.

    @michellesanver Let’s look at our gulp file! gulp.task('sass', function() {

    gulp.src('src/Omnomhub/Bundle/ MainBundle/Resources/sass/*.scss') .pipe(sass()) .pipe(cssmin()) .pipe(gulp.dest('web/css/')); });
  23. 140.

    @michellesanver Let’s look at our gulp file! gulp.src([ ‘bower_components/bootstrap-sass/js/transition.js', 'bower_components/bootstrap-sass/js/alert.js',

    'bower_components/bootstrap-sass/js/button.js', 'bower_components/bootstrap-sass/js/carousel.js', … 'bootstrap-sass/js/affix.js' ])
  24. 147.

    @michellesanver Let’s look at our gulp file! When you run

    “gulp” gulp.task('default', ['sass', 'bootstrapjs']);