Using Sass and Foundation instead of Bootstrap - GruntFile.js

sage
1

Hey. Working on making a fork of roots to utilize foundation and sass instead of bootstrap and less.

Currently my gruntfile looks like this:

'use strict';
module.exports = function (grunt) {

    grunt.initConfig({
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
        'Gruntfile.js',
            ]
        },
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'assets/css/main.min.css': [
            'assets/sass/app.scss'
                    ]
                }
            }
        },
        version: {
            options: {
                file: 'lib/scripts.php',
                css: 'assets/css/main.min.css',
                cssHandle: 'su_styles',
            }
        },
        watch: {
            sass: {
                files: [
          'assets/scss/*.scss'
                ],
                tasks: ['sass', 'version']
            },
            js: {
                files: [
          '<%= jshint.all %>'
                ],
                tasks: ['jshint', 'uglify', 'version']
            },
            livereload: {
                // Browser live reloading
                // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
                options: {
                    livereload: false
                },
                files: [
          'assets/css/main.min.css',
          'templates/*.php',
          '*.php'
                ]
            }
        },
        clean: {
            dist: [
        'assets/css/main.min.css'
            ]
        }
    });

    // Load tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-wp-version');

    // Register tasks
    grunt.registerTask('default', [
    'clean',
    'sass',
    'uglify',
    'version'
    ]);
    grunt.registerTask('dev', [
    'watch'
    ]);

};

My package.json file looks like this (with things taken out)

 "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-wp-version": "~0.1.0",
    "grunt-contrib-sass": "~0.5.0"
  }
}

When I run grunt watch I get this error:

/Gruntfile.js:22
        watch: {
        ^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.

Aborted due to warnings.

Not sure if this is in the scheme of discourse help here, but it’s worth a shot.

I’m totally new to sass, but my firm is using this exclusively.

2

You may find this PR helpful. SASS compilation is being handled by contrib-sass instead of recess, which is LESS only.

1 Like
3

Thanks @Foxaii - I actually used that PR as a base for my own files.

Still running into the same issues though. I do appreciate your help though.

4

If you haven’t already, you need to remove any mention of Recess as it won’t do anything for SASS. Then follow the example on the contrib-sass page: https://github.com/gruntjs/grunt-contrib-sass

5

@kalenjohnson I have, and I also updated my first post.

6

Everything works now except the versioning. I removed that from package.json and gruntfile.js for the time being, but minifying, watch, everything works.

7

This would be really great. Any progress on the Foundation port (if that’s how we could talk about it)?

8

My buddy and I are actually making an entire new framework. I’ll let you know when it’s complete. Shooting for Friday.

2 Likes
9

Hi! I forked Roots and created a quick starter theme using Foundation and Gulp instead of Bootstrap and Grunt.

Feel free to fork or contribute

1 Like