Menu icon Foundation
Creating a released, step by step.

Hi. I'm a new by to `Foundation`, `SCSS` and actually a newbie to entire system. I have followed steps described here: http://foundation.zurb.com/docs/sass.html to get started with `Sass` for both `Grunt + Libsass` and `Compass`. Here is my `Compass`'s config file:

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../Styles"
sass_dir = "scss"
images_dir = "../Images"
javascripts_dir = "../Scripts"

output_style = :expanded

line_comments = false

When I compile the project, I get the `css` file in `Styles` directory. But how can I get the scripts too? Can you guide me please? Thanks in advance.

releasescriptoutput

Hi. I'm a new by to `Foundation`, `SCSS` and actually a newbie to entire system. I have followed steps described here: http://foundation.zurb.com/docs/sass.html to get started with `Sass` for both `Grunt + Libsass` and `Compass`. Here is my `Compass`'s config file:

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../Styles"
sass_dir = "scss"
images_dir = "../Images"
javascripts_dir = "../Scripts"

output_style = :expanded

line_comments = false

When I compile the project, I get the `css` file in `Styles` directory. But how can I get the scripts too? Can you guide me please? Thanks in advance.

Alexander Assimidis about 5 years ago

If u use Grunt u have to customise ur Gruntfile.js

You can use for example

http://alphapixels.com/prepros/

or you use the Yeoman ZF5 Generator for the start

Amiry about 5 years ago

+Alexander Assimidis
Thanks to reply. I don't want to be lazy in things e.g. in this case I don't want to use a GUI. But I want to learn. I started to read Grunt's documentation and learn some points. But what I can't understand, is to how to add scripts to output. Is there any Gruntfile.js sample that works with Foundation? I can learn a lot from sample codes.
Also, I read about Yeoman (thanks to you to let me know about it). But this is a new thing to me. Imagine in these few days I got familiar with many new objects: node.js, foundation, grunt, ... .
And I don't want to move on, before I got skills in them. Yeoman is too much for me right now. May be later :D
So, long story short, I'm focusing on Grunt for know. Do you know any sample of Gruntfile.js? Thanks again.

Alexander Assimidis about 5 years ago

So if u set up a new Project with

foundation new YOUR_PROJECT_NAME --libsass

There will be a Gruntfile.js included there u can customise ur Gruntfile.js and the Task for example

 'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    app: 'app',
    dist: 'dist',

    sass: {
      options: {
        includePaths: ['<%= app %>/bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'extended'
        },
        files: {
          '<%= app %>/css/app.css': '<%= app %>/scss/app.scss'
        }
      }
    },

    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        '<%= app %>/js/**/*.js'
      ]
    },

    clean: {
      dist: {
        src: ['<%= dist %>/*']
      },
    },
    copy: {
      dist: {
        files: [{
          expand: true,
          cwd:'<%= app %>/',
          src: ['images/**', 'fonts/**', '**/*.html', '!**/*.scss', '!bower_components/**'],
          dest: '<%= dist %>/'
        } , {
          expand: true,
          flatten: true,
          src: ['<%= app %>/bower_components/font-awesome/fonts/**'],
          dest: '<%= dist %>/fonts/',
          filter: 'isFile'
        } ]
      },
    },

    uglify: {
      options: {
        preserveComments: 'some',
        mangle: false
      }
    },

    useminPrepare: {
      html: ['<%= app %>/index.html'],
      options: {
        dest: '<%= dist %>'
      }
    },

    usemin: {
      html: ['<%= dist %>/**/*.html', '!<%= app %>/bower_components/**'],
      css: ['<%= dist %>/css/**/*.css'],
      options: {
        dirs: ['<%= dist %>']
      }
    },

    watch: {
      grunt: {
        files: ['Gruntfile.js'],
        tasks: ['sass']
      },
      sass: {
        files: '<%= app %>/scss/**/*.scss',
        tasks: ['sass']
      },
      livereload: {
        files: ['<%= app %>/**/*.html', '!<%= app %>/bower_components/**', '<%= app %>/js/**/*.js', '<%= app %>/css/**/*.css', '<%= app %>/images/**/*.{jpg,gif,svg,jpeg,png}'],
        options: {
          livereload: true
        }
      }
    },

    connect: {
      app: {
        options: {
          port: 9000,
          base: '<%= app %>/',
          open: true,
          livereload: true,
          hostname: '127.0.0.1'
        }
      },
      dist: {
        options: {
          port: 9001,
          base: '<%= dist %>/',
          open: true,
          keepalive: true,
          livereload: false,
          hostname: '127.0.0.1'
        }
      }
    },

    bowerInstall: {
      target: {
        src: [
          '<%= app %>/**/*.html'
        ],
        exclude: [
          'modernizr',
          'font-awesome',
          'jquery-placeholder',
          'jquery.cookie',
          'foundation'
        ]
      }
    }

  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-bower-install');

  grunt.registerTask('compile-sass', ['sass']);
  grunt.registerTask('bower-install', ['bowerInstall']);
  grunt.registerTask('default', ['compile-sass', 'bower-install', 'connect:app', 'watch']);
  grunt.registerTask('validate-js', ['jshint']);
  grunt.registerTask('server-dist', ['connect:dist']);
  grunt.registerTask('publish', ['compile-sass', 'clean:dist', 'validate-js', 'useminPrepare', 'copy:dist', 'concat', 'cssmin', 'uglify', 'usemin']);

};

Amiry about 5 years ago

+Alexander Assimidis
Thanks again for helping me :)
It seems you are using Yeoman generator for Zurb Foundation 5. Am I right?

Alexander Assimidis about 5 years ago

Yes u are right. This is the Gruntfile.js from Yeoman Generator and this is the standard Gruntfile.js from Foundaiton

 module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

So u can stick things together and make ur own like u want but don't forget to install the modules which are needed for some tasks.

Amiry about 5 years ago

Thanks. I'm working on these stuffs. I'll ask my problems if I get intro. You are the best :)

Alexander Assimidis about 5 years ago

No problem just let me know if u have any further questions.
Don't forget to click on helpful :)

Amiry about 5 years ago

+Alexander Assimidis

Hello again :)
Well, I could create a Gruntfile.js that works without using yo.

Here is my Gruntfile:

 module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            options: {
                includePaths: ['bower_components/foundation/scss']
            },
            dist: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/foundation.css': 'scss/foundation_app.scss'
                }
            }
        },

        clean: {
            dist: {
                src: ['js/*', 'css/*']
            },
        },

        copy: {
            dist: {
                files: [
                    {
                        expand: true,
                        src: [
                            'bower_components/foundation/js/foundation.js',
                            'bower_components/foundation/js/foundation.min.js',
                            'bower_components/fastclick/lib/fastclick.js',
                            'bower_components/jquery/dist/*.*',
                            'bower_components/jquery.cookie/jquery.cookie.js',
                            'bower_components/jquery-placeholder/jquery.placeholder.js',
                            'bower_components/modernizr/modernizr.js'
                        ],
                        dest: 'js/'
                    }
                ]
            },
        },

        watch: {
            grunt: { files: ['Gruntfile.js'] },

            sass: {
                files: 'scss/**/*.scss',
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('build', ['sass']);
    grunt.registerTask('publish', ['clean:dist', 'build', 'copy:dist']);
    grunt.registerTask('default', ['build', 'watch']);
}

But I have a problem to copying files which is: files are copying to a directory which is js/ + source-path-pattern.

I mean for example 'bower_components/foundation/js/foundation.js' is copying to 'js/bower_components/foundation/js/foundation.js' instead of 'js/foundation.js'.

Do you have any idea? Thanks.

Amiry about 5 years ago

I found the solution. I should set the flatten property to true:

         copy: {
            dist: {
                files: [
                    {
                        expand: true,
                        flatten: true, // AT THIS LINE
                        src: [
                            'bower_components/foundation/js/foundation.js',
                            'bower_components/foundation/js/foundation.min.js',
                            'bower_components/fastclick/lib/fastclick.js',
                            'bower_components/jquery/dist/*.*',
                            'bower_components/jquery.cookie/jquery.cookie.js',
                            'bower_components/jquery-placeholder/jquery.placeholder.js',
                            'bower_components/modernizr/modernizr.js'
                        ],
                        dest: 'js/'
                    }
                ]
            },
        }