Menu icon Foundation

Developer | Amol, Mazandaran, Iran

Web developer with .NET: C#, ASP.NET MVC.

My Posts

  • 9
    Replies
  • Creating a released, step by step.

    By Amiry

    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:

    Last Reply by Amiry over 5 years ago


My Comments

Amiry commented on Amiry's post over 5 years

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/'
                    }
                ]
            },
        }

Amiry commented on Amiry's post over 5 years

+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 commented on Amiry's post over 5 years

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

Amiry commented on Amiry's post over 5 years

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

Amiry commented on Amiry's post over 5 years

+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.

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Amiry's post over 5 years

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/'
                    }
                ]
            },
        }

You commented on Amiry's post over 5 years

+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.

You commented on Amiry's post over 5 years

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

You commented on Amiry's post over 5 years

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

You commented on Amiry's post over 5 years

+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.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content