lacee1986
9/23/2016 - 3:23 PM

Grunt for Wordpress theme

Grunt for Wordpress theme

module.exports = function (grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Sass
        sass: {
            options: {
                sourceMap: true
            },
            dist: {
                files: {
                    'build/css/production.css': 'build/css/main.scss'
                }
            }
        },
        
        // Put all javascript files into one file
        concat: {
            /*
            css: {
                src: ['build/css/reset.css', 'build/css/*.css', '!build/css/main.css', '!build/css/responsive.css', 'build/css/main.css', 'build/css/responsive.css'],
                dest: 'assets/css/production.css'
            },
            */
            js: {
                src: ['build/js/jquery.js', 'build/js/*.js', '!build/js/main.js', '!build/js/production.js', '!build/js/ajax.js', 'build/js/main.js'],
                dest: 'build/js/production.js'
            }
        },
                
        // Minimize javascript files
        uglify: {
            options: {
                // the banner is inserted at the top of the output
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
                mangle: false
            },
            my_target: {
                files: {
                    'assets/js/production.min.js': ['build/js/production.js'],
                    'assets/js/ajax.min.js': ['build/js/ajax.js']
                }
            }
        },
                
        // Minify all CSS files into 1 file
        cssmin: {
            target: {
                files: [{
                        expand: true,
                        cwd: 'build/css',
                        src: 'production.css',
                        dest: 'assets/css',
                        ext: '.min.css'
                    }]
            }
        },
        
        // Optimize images
        imagemin: {
            dynamic: {
                files: [{
                        expand: true,
                        cwd: 'build/images/',
                        src: ['*.{png,jpg,gif}'],
                        dest: 'assets/images/'
                    }]
            }
        },

        // Optimize SVGs
        svgmin: { //minimize SVG files
            options: {
                plugins: [
                    { removeViewBox: false },
                    { removeUselessStrokeAndFill: false }
                ]
            },
            dist: {
                expand: true,
                cwd: 'build/images/icons',
                src: ['*.svg'],
                dest: 'assets/images/icons/'
            }
        },
        
        // Dekstop notifications
        notify: {
            welcome: {
                options: {
                    title: "Grunt", // Note we are outputting the package.json name variable here
                    message: "Lets roll: <%= pkg.name %>"
                }
            },
            minify: {
                options: {
                    title: "Grunt", // Note we are outputting the package.json name variable here
                    message: "Minify: <%= pkg.name %>"
                }
            },
            watching: {
                options: {
                    title: "Grunt", // Note we are outputting the package.json name variable here
                    message: "Watching: <%= pkg.name %>"
                }
            },
            another: {
                options: {
                    title: "Grunt",
                    message: "All good! :)"
                }
            }
        },
        
        // Watch file changes, file deletions or file additions
        watch: {
            scripts: {
                files: ['build/js/*.js'],
                tasks: ['concat:js', 'uglify'],
                options: {
                    spawn: false
                }
            },
            css: {
                files: ['build/css/*.{css,scss}', 'build/css/**/*.{css,scss}'],
                tasks: ['sass', 'cssmin'],
                options: {
                    spawn: false
                }
            },
            images: {
                files: ['build/images/*.{png,jpg,gif}'],
                tasks: ['imagemin']
            },
            svgs: {
                files: ['build/images/icons/*.svg'],
                tasks: ['svgmin']
            },

            notify: {
                files: ['build/css/*.*', 'build/js/*.*', 'build/images/*.*'],
                tasks: ['notify:another']
            }
        }

    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-sass'); // Sass
    grunt.loadNpmTasks('grunt-contrib-concat'); // Merge JS files
    grunt.loadNpmTasks('grunt-contrib-uglify'); // Minify JS files
    grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image optimization
    grunt.loadNpmTasks('grunt-contrib-cssmin'); // Minify CSS files into 1 file
    grunt.loadNpmTasks('grunt-svgmin'); // Minify SVGs
    grunt.loadNpmTasks('grunt-contrib-watch'); // Watch changes
    grunt.loadNpmTasks('grunt-notify'); // Desktop notifications

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['notify:watching','watch']);
    grunt.registerTask('minify', ['notify:minify', 'sass', 'concat', 'uglify', 'cssmin', 'imagemin', 'svgmin']);

};
{
  "name": "ARI Wordpress Theme",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-cssmin": "^0.13.0",
    "grunt-contrib-imagemin": "^0.9.4",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.1",
    "grunt-sass": "^1.2.1",
    "grunt-svgmin": "^3.3.0"
  }
}