Documentation improvements

[ollietb]

Create the following files Resources/doc/Using-with-Symfony2-twig Resources/doc/Using-with-Bower Resources/doc/List-of-gulp-plugins Resources/doc/examples

[joshualinog]

totally agree; this would be great.

[ryanhyslop]

Would definitely be keen to see some additional examples of using Gassetic, we're currently trying to integrate it into a project and theres some confusion over how to introduce some other tasks like Browserify and things like gulp-svg2png.

[romanschejbal]

Here is an advanced gassetic configuration from which you can inspire...

requires:
    coffee: gulp-coffee
    minify: gulp-minify-css
    concat: gulp-concat
    freeze: gulp-freeze
    rename: gulp-rename
    less: gulp-less
    uglify: gulp-uglify
    myth: gulp-myth
    plumber: gulp-plumber
    shorter: tasks/shorter.js
mimetypes:
    images:
        dev:
            outputFolder: web/tmp/css/images
            tasks: []
            autoRenaming: false
        prod:
            outputFolder: web/compiled/css/images
            tasks: []
            htmlTag: '{{ asset("%path%") }}'
        files:
            swipebox:
                - assets/vendor/swipebox/src/img/*
    less:
        dev:
            outputFolder: web/tmp/css
            webPath:      /tmp/css
            tasks:
                - { name: plumber }
                - { name: less }
        prod:
            outputFolder: web/compiled/css
            webPath:      /compiled/css
            tasks:
                - { name: plumber }
                - { name: less }
                - { name: minify, args: { noAdvanced: true } }
                - { name: concat, args: '%filename%' }
                - { name: freeze }
                - { name: rename, callback: 'shorter' }
            htmlTag: '<link rel="stylesheet" href="{{ asset("%path%") }}">'
            #autoGitAdd: true
        files:
            crowdreactive.css:
                - assets/css/less/crowdreactive.less
            eventstagram.css:
                - assets/css/less/eventstagram.less
        watch:
            - assets/**/*.less
            - assets/**/*.css

    coffee:
        dev:
            outputFolder: assets/js/tmp
            tasks:
                - { name: plumber }
                - { name: coffee, args: { bare: true } }
                - { name: concat, args: '%filename%' }
        prod:
            outputFolder: assets/js/tmp
            tasks:
                - { name: plumber }
                - { name: coffee, args: { bare: true } }
                - { name: concat, args: '%filename%' }
        files:
            threejslideshow.js:
                - assets/coffee/engine/engine.coffee
                - assets/coffee/engine/entity/baseNode.coffee
                - assets/coffee/engine/entity/baseScene.coffee
                - assets/coffee/engine/entity/perspectiveCamera.coffee
                - assets/coffee/engine/entity/orthographicCamera.coffee
                - assets/coffee/engine/entity/imageNode.coffee
                - assets/coffee/engine/entity/animatedSprite.coffee
                - assets/coffee/engine/entity/text2d.coffee
                - assets/coffee/engine/modifier/easeType.coffee
                - assets/coffee/engine/modifier/modifier.coffee
                - assets/coffee/engine/modifier/durationModifier.coffee
                - assets/coffee/engine/modifier/delayModifier.coffee
                - assets/coffee/engine/modifier/moveModifier.coffee
                - assets/coffee/engine/modifier/scaleModifier.coffee
                - assets/coffee/engine/modifier/rotateModifier.coffee
                - assets/coffee/engine/modifier/opacityModifier.coffee
                - assets/coffee/engine/modifier/sequenceModifier.coffee
                - assets/coffee/scene/**/*.coffee
                - assets/coffee/slideshow/base.coffee
                - assets/coffee/slideshow/basic.coffee

    js:
        deps:
            - coffee
        dev:
            outputFolder: web/tmp/js
            webPath:      /tmp/js
            tasks: []
        prod:
            outputFolder: web/compiled/js
            webPath:      /compiled/js
            tasks:
                - { name: concat, args: '%filename%' }
                - { name: uglify, args: { mangle: false } }
                - { name: freeze }
                - { name: rename, callback: 'shorter' }
            htmlTag: '<script type="text/javascript" src="{{ asset("%path%") }}"></script>'
            #autoGitAdd: true
        files:
            threejslideshow.js:
                - assets/vendor/threejs/build/three.js
                - assets/js/tmp/threejslideshow.js/**/*.js

replacementPaths:
    - app/Resources/views/*.html.twig
    - src/**/*.html.twig

default:
    - js
    - less
    - images

And the custom callback "shorter" thats passed to the gulp-rename plugin:

module.exports = function (path) {
    path.basename = path.basename.substr(0, path.basename.length - 27);
}

Let me know if you need any help, I assume the gulp-browserify and gulp-svg2png will work just fine.