Розробка на WordPress з Sass і Grunt.js

Опис робочого процесу.

1. Встановлюємо локальне середовище розробки WordPress.
2. Grunt встановлюється за допомогою npm, тому спочатку необхідно встановити Node.js. Sass — це додаток Ruby, який встановлюється за допомогою gem, тому спочатку на комп’ютер Windows треба встановити Ruby.
3. Встановлюємо grunt-cli глобально (npm install -g grunt-cli). Встановлюємо Sass (gem install sass). Встановлюємо grunt локально (npm install grunt --save-dev).
4. За допомогою npm додаємо три модуля для генерації .css (завдання прописуються у Gruntfile.js). Коли у командному рядку ми дамо команду grunt, при збереженні буде генеруватися .css.
   1. npm install grunt-contrib-sass --save-dev
   2. npm install grunt-contrib-watch --save-dev
   3. npm install grunt-autoprefixer --save-dev
5. Генеруємо sass-версію нової теми (_s), створюємо файли .gitignore (node_modules, .npm-debug.log, tmp, .sass-cache, *.css.map) і package.json.
6. Коментар, який не повинен видалятися у мініфікованому файлі стилів, має починатися з комбінації /*!.

Gruntfile.js

module.exports = function(grunt) {

	grunt.initConfig({

		pkg: grunt.file.readJSON('package.json'),

		/**
		 * Sass task
		 */
		sass: {
			dev: {
				options: {
					style: 'expanded',
					sourcemap: 'none'
				},
				files: {
					'compiled/style-human.css': 'sass/style.scss' /* The source is from _s framework */
				}
			},
			dist: {
				options: {
					style: 'compressed',
					sourcemap: 'none'
				},
				files: {
					'compiled/style.css': 'sass/style.scss' /* The source is from _s framework */
				}
			}
		},

		/**
		 * Autoprefixer
		 */
		autoprefixer: {
			options: {
				browsers: ['last 2 versions']
			},
			//prefix all files
			multiple_files: {
				expand: true,
				flatten: true,
				src: 'compiled/*.css',
				dest: 'css/'
			}
		},

		/**
		 * Watch task
		 */
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['sass', 'autoprefixer']
			}
		}

	});

	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-autoprefixer');
	grunt.registerTask('default', ['watch']);

}