Gruntfile for the Sass-based Underscores WordPress theme - work in progress.

README.md

Setup and Deployment

Proper setup of a project based on Basis requires some common steps, such as setting up wordpress, forking this as a theme, configuring the database, and so on.

Deploying to staging or production (typically, from the develop or master branch, respectively) expects a few steps:

1. Update the Changelog. grunt changelog has a lot of options for the curious.
2. Commit your changes, ensuring they're merged to develop or master, as appropriate. Push them. git push origin develop for instance.
3. Update the version, which pushes the tag to the server. grunt bump can take :patch or :minor or :major for example.
4. Deploy to the server via SFTP. Expect grunt deploy to handle this, but you have to set up logins and stuff.
5. Ideally, notify others of this deployment. Haven't figured this piece out yet.

Using Grunt

Generally you will use the following tasks:

• watch - This is the default task. Does the live reload stuff.
• build - This is how you build the site on your laptop. Alias for "sass", "autoprefixer", "uglify", "imagemin" tasks.
• stage - This is how you would get stuff ready for the staging server. This task is not yet complete and/or useful. Alias for "build", "bump", "changelog", "deploy" tasks.

Please add notes here as you learn how to get the FTP working and so forth. My stage task is a first attempt at making something so you can deploy the site, and it does all the appropriate tagging, changelog-generation, building files, committing and pushing, and FTP deploying.

Underscores

We started with Underscores, and because of that, you'll want to replace needmore (not _s) in the following way if you need to rename the theme.

• Search for: 'needmore' and replace with: 'megatherium'
• Search for: needmore_ and replace with: megatherium_
• Search for: Text Domain: needmore and replace with: Text Domain: megatherium in style.css.
• Search for:  needmore and replace with:  Megatherium
• Search for: needmore- and replace with: megatherium-

Then, update the stylesheet header in style.css and the links in footer.php with your own information. Next, update or delete this readme.

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkgc: grunt.file.readJSON('package.json'),

    // Watch files that may change and should trigger updates
    watch: {
      sass: {
        files: ['sass/*.{scss,sass}', 'sass/**/*.scss'],
        tasks: ['sass', 'autoprefixer', 'uglify'],
      },
      js: {
        files: ['js/app.js'],
        tasks: ['uglify'],
      },
      images: {
        files: ['images/*.{png,jpg,gif}'],
        tasks: ['imagemin'],
      },
      livereload: {
        options: { livereload: true },
        files: [
          '*.php',
          'inc/*.php',
          'style.css',
          'js/app.js',
          'images/*.{png,jpg,jpeg,gif,webp,svg}',
        ],
      }
    },

    // Compile SASS
    sass: {
      dist: {
        options: {
          style: 'expanded',
        },
        files: { // 'destination': 'source' ... obviously.
          'css/style.css': 'sass/style.scss',
        }
      }
    },

    // Autoprefix CSS
    autoprefixer: {
      options: {
        browsers: ['last 2 versions', 'ie 8', 'ios 6', 'android 4'],
        map: true
      },
      files: {
        expand: true,
        flatten: true,
        src: 'css/*.css',
        dest: 'css'
      },
    },

    // Uglify to concat, minify, and make source maps
    uglify: {
      main: {
        options: {
          sourceMap: 'js/main.js.map',
          sourceMappingURL: 'main.js.map',
          sourceMapPrefix: 2,
        },
        files: {
          'js/main.min.js': [
            'js/app.js'
          ]
        }
      }
    },

    // Image optimization
    imagemin: {
      dist: {
        options: {
          optimizationLevel: 7,
          progressive: true,
          interlaced: true
        },
        files: [{
          expand: true,
          cwd: 'images/',
          src: ['*.{png,jpg,gif}'],
          dest: 'images/'
        }]
      }
    },

    // Bump version
    bump: {
      options: {
        files: ['package.json'],
        updateConfigs: [],
        commit: true,
        commitMessage: 'Release v%VERSION%',
        commitFiles: ['package.json'],
        createTag: true,
        tagName: 'v%VERSION%',
        tagMessage: 'Version %VERSION%',
        push: true,
        pushTo: 'origin',
        gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d'
      }
    },

    // Generate changelog (assumes proper repo defined in package.json!)
    changelog: {
      options: {
        repository: 'https://github.com/needmore/basis'
      }
    },

    // SFTP
    'sftp-deploy': {
      build: {
        auth: {
          host: 'server.com',
          port: 22,
          authKey: 'key1'
        },
        cache: 'sftpCache.json',
        src: '/path/to/source/folder',
        dest: '/path/to/destination/folder',
        exclusions: [
          '/path/to/source/folder/**/.DS_Store',
          'dist/tmp'
        ],
        serverSep: '/',
        concurrency: 4,
        progress: true
      }
    },

    slack: {
      options: {
        token: 'this_should_really_be_external', // get one from here: https://typekit.slack.com/services
        domain: 'needmore',
        channel: '#dev',
        username: 'git',
        icon_emoji: ':ghost:',
        icon_url: 'https://slack.com/img/icons/app-57.png' // if icon_emoji not specified
      },
      your_target: {
        text: 'Text you want to push to slack.com {{message}}' // {{message}} can be replaced with --message='some text' option from command line
      },
    },

  });

  // Load all grunt tasks matching the `grunt-*` pattern
  require('load-grunt-tasks')(grunt);

  // Default task(s)
  // We can do better! http://gruntjs.com/creating-tasks
  grunt.registerTask('default', ['watch']);
  grunt.registerTask('deploy', ['sftp-deploy']);
  grunt.registerTask('build', ['sass', 'autoprefixer', 'uglify', 'imagemin']);
  grunt.registerTask('stage', ['build', 'bump', 'changelog', 'deploy']);
}

package.json

{
  "name": "basis",
  "version": "0.0.2",
  "description": "WordPress theme by Needmore Designs.",
  "repository": {
    "type": "git",
    "url": "git://github.com/needmore/basis.git"
  },
  "author": "Needmore Designs",
  "homepage": "https://github.com/needmore/basis",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-sass": "^0.8.1",
    "grunt-autoprefixer": "^1.0.1",
    "grunt-bump": "0.0.15",
    "grunt-newer": "^0.7.0",
    "grunt-notify": "^0.3.1",
    "grunt-conventional-changelog": "^1.1.0",
    "grunt-sftp-deploy": "^0.2.1",
    "load-grunt-tasks": "^0.6.0",
    "grunt-slack-hook": "0.0.3"
  }
}