5/23/2016 - 2:49 PM

Gruntfile configurations

Rendered
Source

Watch

Install:

npm install grunt-contrib-watch --save-dev

Enable:

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

Configuration.

watch: {
  js: {
      files: 'js/src/*.js',
      tasks: ['jshint:all', 'uglify:dev'],
      options: {
          livereload: true
      }
  },
  sass: {
      files: 'css/src/*.*',
      tasks: ['sass:dev'],
      options: {
          livereload: true
      }
  },
  livereload: {
      files: ['*.php', '**/*.php'],
      options: {
          livereload: true
      }
  },
},

uglifyjs.md

Rendered
Source

UglifyJS

Install:

npm install grunt-contrib-uglify --save-dev

Enable:

grunt.loadNpmTasks('grunt-contrib-uglify');

Configuration.

uglify: {
    dev: {
        options: {
            mangle: false,
            beautify: true,
            compress: false,
            preserveComments: 'all'
        },
        files: {
            'js/main.min.js': ['js/src/main.js']
        }
    },
    dist: {
        options: {
            mangle: false,
            sourceMap: true
        },
        files: {
            'js/main.min.js': ['js/src/main.js']
        }
    },
},

spritesmith.md

Rendered
Source

spritesmith

Install:

npm install grunt-spritesmith --save-dev

Enable:

grunt.loadNpmTasks('grunt-spritesmith');

Configuration.

sprite:{
    s1: {
        src: ['images/logo.png', 'images/starfish-logo.png'],
        dest: 'images/sprite1.png',
        imgPath: '../images/sprite1.png',
        destCss: 'css/src/_sprite1.scss'
    }
},

sftp-deploy.md

Rendered
Source

sftp-deploy

Install:

npm install grunt-sftp-deploy --save-dev

Enable:

grunt.loadNpmTasks('grunt-sftp-deploy');

Configuration.

'sftp-deploy': {
    production: {
        auth: {
            host: 'host.com',
            port: 21,
            authKey: 'key1'
        },
        cache: 'sftpCache.json',
        src: './',
        dest: '/wp-content/themes/theone',
        exclusions: [
            'sftpCache.json', 
            'sftp-config.json', 
            'composer.lock', 
            '.gitignore', 
            'bower.json', 
            'composer.json', 
            'Gruntfile.js', 
            'package.json', 
            'css/src', 
            'js/src', 
            '**/Thumbs.db',
            '.grunt', 
            '.sass-cache', 
            'bower_components', 
            '.git', 
            'node_modules', 
            '*.sublime-project', 
            '*.sublime-workspace', 
            'vendor'
        ],
        serverSep: '/',
        localSep: '\\', // for Windows
        concurrency: 4,
        progress: true
    },
},

File .ftppass:

{
  "key1": {
    "username": "user123",
    "password": "N72\jB,@Yd"
  }
}

sass.md

Rendered
Source

Sass

Install:

npm install grunt-sass --save-dev

Enable:

grunt.loadNpmTasks('grunt-sass');

Configuration.

sass: {
    dev: {
        options: {
            sourceMap: true,
            outputStyle: 'expanded'
        },
        files: {
            'css/main.min.css': 'css/src/main.scss'
        }
    },
    dist: {
        options: {
            sourceMap: true,
            outputStyle: 'compressed',
            noCache: true
        },
        files: {
            'css/main.min.css': 'css/src/main.scss'
        }
    }
},

replace.md

Rendered
Source

Replace

Install:

npm install grunt-text-replace --save-dev

Enable:

grunt.loadNpmTasks('grunt-text-replace');

Configuration.

replace: {
    jquery_ui: {
        src: 'bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css',
        dest: 'bower_components/jquery-ui/themes/smoothness/jquery-ui-mod.min.css',
        replacements: [{
            from: /images\/([^\.]+\.(jpe?g|gif|png))/g,
            to: '../images/jquery-ui/$1'
        }]
    }
},

postcss.md

Rendered
Source

PostCSS

Install:

npm install grunt-postcss --save-dev

Enable:

grunt.loadNpmTasks('grunt-postcss');

Configuration.

postcss: {
    options: {
        map: {
            inline: false
        },
        processors: [
            // require('pixrem')(),
            // require('oldie')({
            //     method: "clone"
            // }),
            require('autoprefixer')({
                browsers: ['last 3 versions', 'ie >= 8']
            }),
            require('cssnano')()
        ]
    },
    build: {
        src: 'css/main.min.css'
    }
},

jshint.md

Rendered
Source

JSHint

Install:

npm install grunt-contrib-jshint --save-dev

Enable:

grunt.loadNpmTasks('grunt-contrib-jshint');

Configuration.

jshint: {
    options: {
        globals: {
        }
    },
    all: ['js/src/main.js']
},

ftpush.md

Rendered
Source

ftpush

Install:

npm install grunt-ftpush --save-dev

Enable:

grunt.loadNpmTasks('grunt-ftpush');

Configuration.

ftpush: {
    production: {
        auth: {
            host: 'host.com',
            port: 21,
            authKey: 'key1'
        },
        src: './',
        dest: '/wp-content/themes/theone',
        exclusions: [
            '.ftppass', 
            'sftp-config.json', 
            'composer.lock', 
            '.gitignore', 
            'bower.json', 
            'composer.json', 
            'Gruntfile.js', 
            'package.json', 
            'css/src', 
            'js/src', 
            '**/Thumbs.db',
            '.grunt', 
            '.sass-cache', 
            'bower_components', 
            '.git', 
            'node_modules', 
            '*.sublime-project', 
            '*.sublime-workspace', 
            'vendor'
        ],
        simple: true
    },
},

File .ftppass:

{
  "key1": {
    "username": "user123",
    "password": "N72\jB,@Yd"
  }
}

copy.md

Rendered
Source

Copy

Install:

npm install grunt-contrib-copy --save-dev

Enable:

grunt.loadNpmTasks('grunt-contrib-copy');

Configuration.

copy: {
    jquery_ui_images: {
        expand: true,
        src: 'bower_components/jquery-ui/themes/smoothness/images/*',
        dest: 'images/jquery-ui/',
        flatten: true
    },
    bootstrap_fonts: {
        expand: true,
        src: 'bower_components/bootstrap/fonts/*',
        dest: 'fonts/',
        flatten: true
    },
    fontawesome_fonts: {
        expand: true,
        src: 'bower_components/fontawesome/fonts/*',
        dest: 'fonts/',
        flatten: true
    }
},

concat.md

Rendered
Source

Concat

Install:

npm install grunt-contrib-concat --save-dev

Enable:

grunt.loadNpmTasks('grunt-contrib-concat');

Configuration.

concat: {
  ie: {
      src: [
          'bower_components/IE9/index.js', 
          'bower_components/respond/dest/respond.min.js', 
      ],
      dest: 'js/ie.min.js'
  },
  js: {
      src: [
          'bower_components/jquery/dist/jquery.min.js', 
          'bower_components/bootstrap/dist/js/bootstrap.min.js'
      ],
      dest: 'js/vendor.min.js'
  },
  css: {
      src: [
          'bower_components/bootstrap/dist/css/bootstrap.min.css', 
          'bower_components/fontawesome/css/font-awesome.min.css'
      ],
      dest: 'css/vendor.min.css'
  }
},

composer.md

Rendered
Source

Composer

Install:

npm install grunt-composer --save-dev

Enable:

grunt.loadNpmTasks('grunt-composer');

Configuration example.

composer: {
},

bower.md

Rendered
Source

Bower

Install:

npm install grunt-bower-task --save-dev

Enable:

grunt.loadNpmTasks('grunt-bower-task');

Configuration.

bower: {
    install: {
        options: {
            targetDir: './bower_components'
        }
    }
},

Gruntfile.js

module.exports = function(grunt) {
    
    require('load-grunt-tasks')(grunt);
    
    grunt.initConfig({
    });
    
    grunt.registerTask('default', []);
    
//     grunt.registerTask('install', ['composer:update', 'bower:install', 'sprite:s1', 'copy', 'concat', 'replace']);
//     grunt.registerTask('dev', ['sass:dev', 'jshint:all', 'uglify:dev']);
//     grunt.registerTask('dist', ['sass:dist', 'jshint:all', 'uglify:dist']);
//     grunt.registerTask('ftp_upload', ['ftpush:production']);
//     grunt.registerTask('sftp_upload', ['sftp-deploy:production']);
//     grunt.registerTask('default', ['dev', 'watch']);
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Gruntfile configurations