Paschdan external config for compass

Gruntfile.js

@@ -1,36 +1,37 @@
 module.exports = function (grunt) {
 
-    // globs where our JS files are found - used below in uglify and watch
-    var jsFilePaths = [
-        'js/*.js',
-        'js/app/*.js',
-        'js/app/modules/*.js'
-    ];
-
     // Project configuration
     grunt.initConfig({
         // you can read in JSON files, which are then set as objects. We use this below with banner
         pkg: grunt.file.readJSON('package.json'),
 
         // setup some variables that we'll use below
-        srcDir: 'assets',
+        rootAssetsDir: 'assets',
         webDir: 'web',
-        targetDir: '<%= webDir %>/<%= srcDir %>',
+        targetAssetsDir: '<%= webDir %>/assets',
 
         copy: {
             main: {
                 files: [
-                    {expand: true, src: ['<%= srcDir %>/**'], dest: '<%= webDir %>'}
+                    {
+                        expand: true,
+                        src: [
+                            // copy /assets to /web/assets
+                            '<%= rootAssetsDir %>/**',
+                            // but don't copy the SASS source files, not needed!
+                            '!<%= rootAssetsDir %>/sass/**',
+                            // and don't copy the config directory
+                            '!<%= rootAssetsDir %>/config/**'
+                        ],
+                        dest: '<%= webDir %>'
+                    }
                 ]
             }
         },
 
         clean: {
             build: {
-                src: ['<%= targetDir %>/**']
-            },
-            sass: {
-                src: ['<%= targetDir %>/sass']
+                src: ['<%= targetAssetsDir %>/**']
             }
         },
 
@@ -40,10 +41,10 @@ module.exports = function (grunt) {
             // files or configuration
             main: {
                 options: {
-                    mainConfigFile: '<%= targetDir %>/js/common.js',
-                    appDir: '<%= srcDir %>',
+                    mainConfigFile: '<%= targetAssetsDir %>/js/common.js',
+                    appDir: '<%= rootAssetsDir %>',
                     baseUrl: './js',
-                    dir: '<%= targetDir %>',
+                    dir: '<%= targetAssetsDir %>',
                     // will be taken care of with compass
                     optimizeCss: "none",
                     // will be taken care of with an uglify task directly
@@ -95,30 +96,14 @@ module.exports = function (grunt) {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             build: {
-                /*
-                 * I'm not sure if finding files recursively is possible. This is
-                 * a bit ugly, but it accomplishes the task of finding all files
-                 * in the built directory (that we want, not vendor) and uglifying them.
-                 *
-                 * Additionally, I created a little self-executing function
-                 * here so that I could re-use the jsFilePaths from above
-                 *
-                 * https://github.com/gruntjs/grunt-contrib-uglify/issues/23
-                 */
-                files: (function() {
-
-                    var files = [];
-                    jsFilePaths.forEach(function(val) {
-                        files.push({
-                            expand: true,
-                            cwd: '<%= targetDir %>',
-                            src: val,
-                            dest: '<%= targetDir %>'
-                        });
-                    });
-
-                    return files;
-                })()
+                files: [
+                    {
+                        expand: true,
+                        cwd: '<%= targetAssetsDir %>/js/',
+                        src: ['**/*.js'],
+                        dest: '<%= targetAssetsDir %>/js/'
+                    }
+                ]
             }
         },
 
@@ -129,7 +114,7 @@ module.exports = function (grunt) {
             },
             all: [
                 'Gruntfile.js',
-                '<%= targetDir %>/js/{,*/}*.js'
+                '<%= targetAssetsDir %>/js/{,*/}*.js'
             ]
         },
 
@@ -138,17 +123,17 @@ module.exports = function (grunt) {
             // the "production" build subtask (grunt compass:dist)
             dist: {
                 options: {
-                    sassDir: '<%= targetDir %>/sass',
-                    cssDir: '<%= targetDir %>/css',
+                    // SASS and CSS paths are defined in the config
+                    config: '<%= rootAssetsDir %>/config/compass.rb',
                     environment: 'production',
                     outputStyle: 'compressed'
                 }
             },
             // the "development" build subtask (grunt compass:dev)
             dev: {
                 options: {
-                    sassDir: '<%= targetDir %>/sass',
-                    cssDir: '<%= targetDir %>/css',
+                    // SASS and CSS paths are defined in the config
+                    config: '<%= rootAssetsDir %>/config/compass.rb',
                     outputStyle: 'expanded'
                 }
             }
@@ -158,15 +143,15 @@ module.exports = function (grunt) {
         watch: {
             // watch all JS files and run jshint
             scripts: {
-                files: ['<%= srcDir %>/js/**'],
+                files: ['<%= rootAssetsDir %>/js/**'],
                 tasks: ['copy', 'jshint'],
                 options: {
                     spawn: false
                 }
             },
             // watch all .scss files and run compass
             compass: {
-                files: '<%= srcDir %>/sass/*.scss',
+                files: '<%= rootAssetsDir %>/sass/*.scss',
                 tasks: ['copy', 'compass:dev'],
                 options: {
                     spawn: false
@@ -186,7 +171,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-clean');
 
     // sub-task that copies assets to web/assets, and also cleans some things
-    grunt.registerTask('copy:assets', ['clean:build', 'copy', 'clean:sass']);
+    grunt.registerTask('copy:assets', ['clean:build', 'copy']);
 
     // the "default" task (e.g. simply "Grunt") runs tasks for development
     grunt.registerTask('default', ['copy:assets', 'jshint', 'compass:dev']);

assets/config/compass.rb

@@ -0,0 +1,33 @@
+# Compass configuration file! See: http://compass-style.org/help/tutorials/configuration-reference/
+
+# Target directory where the CSS files will be built
+css_dir = "web/assets/css"
+
+# Source directory of the sass files
+# Notice this is *not* in web - we're not copying these files to web, because
+# we don't need to (we can just tell Compass to look here)
+sass_dir = "assets/sass"
+
+
+# The following things we don't care about as much, but here you go :)
+
+# Used with the image-url helper
+images_dir = "web/assets/images"
+# For its purpose, see https://groups.google.com/forum/#!topic/compass-users/rjAntZ8RZgs
+javascripts_dir = "web/assets/js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+#relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

assets/js/common.js

@@ -18,7 +18,7 @@ requirejs.config({
          * AMD, you will likely need a paths entry and also an entry in
          * shim (beyond what you see for the bootstrap shim).
          */
-        jquery: '../vendor/jquery/jquery.min',
+        jquery: '../vendor/jquery/dist/jquery.min',
         bootstrap: '../vendor/bootstrap/dist/js/bootstrap.min'
     },
     shim: {

src/Yoda/EventBundle/Resources/views/_requirejs.html.twig

@@ -1,7 +1,7 @@
 <script src="{{ asset('assets/vendor/requirejs/require.js') }}"></script>
 <script>
     requirejs.config({
-        baseUrl: '{{ app.request.basePath }}/assets/js'
+        baseUrl: '{{ asset('assets/js') }}'
     });
 
     /**