grunt-polymer-wp
Version:
A new Grunt pipeline for Wordpress themes in HTML/js/css and Polymer webcomponents developing
619 lines (554 loc) • 20 kB
JavaScript
module.exports = function (grunt) {
//var settings = require('./bin/configuration.js');
var config = {
domain: '<%= pkg.domain %>',
staging: '<%= pkg.staging %>',
app: 'src',
urlTest: '',
dev: 'local',
dist: '../wp-content/themes/<%= pkg.theme %>/',
urlDist: '/wp-content/themes/<%= pkg.theme %>/'
};
// Configuration
grunt.initConfig({
config: config,
pkg: grunt.file.readJSON('package.json'),
'http-server': {
'dev': {
// the server root directory
root: './',
// the server port
// can also be written as a function, e.g.
// port: function() { return 8282; }
port: 8080,
// the host ip address
// If specified to, for example, "127.0.0.1" the server will
// only be available on that ip.
// Specify "0.0.0.0" to be available everywhere
host: "localhost",
//cache: false,
showDir : true,
autoIndex: true,
// server default file extension
ext: "html",
// run in parallel with other tasks
runInBackground: true,
// specify a logger function. By default the requests are
// sent to stdout.
logFn: function(req, res, error) {
},
// Proxies all requests which can't be resolved locally to the given url
// Note this this will disable 'showDir'
//proxy: "http://someurl.com",
/// Use 'https: true' for default module SSL configuration
/// (default state is disabled)
https: false,
// Tell grunt task to open the browser
openBrowser : true
// customize url to serve specific pages
//customPages: {
// "/readme": "README.md",
// "/readme.html": "README.html"
//}
}
},
watch: {
/*gruntfile: {
files: ['Gruntfile.js']
},
*/
html:{
files: ['<%= config.app %>/**/*.html'],
tasks: ['sync','replace:dev_HTML']
},
php:{
files: ['<%= config.app %>/*.php'],
tasks: ['sync']
},
compass: {
files: ['<%= config.app %>/css/{,*/}*.{scss,sass}'],
tasks: ['compass:dev']
},
css: {
files: ['<%= config.app %>/css/*.css'],
tasks: ['sync']
},
js: {
files: ['<%= config.app %>/js/{,*/}*.js'],
tasks: ['sync']
},
img:{
files: ['<%= config.app %>/images/{,*/}*'],
tasks: ['imagemin']
},
fonts:{
files: ['<%= config.app %>/fonts/{,*/}*'],
tasks: ['sync']
}
},
sync: {
main: {
files: [{
cwd: '<%= config.app %>',
src: [
'*.html',
'*.htm',
'*.php',
'js/**/*',
'css/*.css',
'fonts/**',
'webcomponents/**/*', //if there is Polymer
//'bower_components/**/*',
//'build/**/*',
'images/*.svg'
],
dest: '<%= config.dev %>'
}],
//pretend: true, // Don't do any IO. Before you run the task with `updateAndDelete` PLEASE MAKE SURE it doesn't remove too much.
verbose: true, // Display log messages when copying files
updateAndDelete: false,
ignoreInDest: '<%= config.dev %>/js/scriptloader.js'
}
////// VERSIONE DEL SYNC SEPARATA PER TIPOLOGIA DI FILE ///////////////////////////
// polymer: {
// files: [{
// cwd: '<%= config.app %>',
// src: [
// 'webcomponents/**/*', //if there is Polymer
// 'bower_components/**/*'
// ],
// dest: '<%= config.dist %>'
// }],
// verbose: true, // Default: false
// //pretend: true, // Don't do any disk operations - just write log. Default: false
// failOnError: true, // Fail the task when copying is not possible. Default: false
// ignoreInDest: ["css/**","/fonts/**","js/**","images/**"], // Never remove js files from destination. Default: none
// updateAndDelete: false // Remove all files from dest that are not found in src. Default: false
// //compareUsing: "md5" // compares via md5 hash of file contents, instead of file modification time. Default: "mtime"
// },
// css: {
// files: [
// {cwd: '<%= config.app %>', src: ['css/*.css'], dest: '<%= config.dist %>'}
// ],
// verbose: true,
// failOnError: true,
// ignoreInDest: ["fonts/**","*.html","js/**","images/**"],
// updateAndDelete: true
// },
// js: {
// files: [
// {cwd: '<%= config.app %>', src: ['js/**/*.js'], dest: '<%= config.dist %>'}
// ],
// verbose: true,
// failOnError: true,
// ignoreInDest: ["css/**","*.html","fonts/**","images/**"],
// updateAndDelete: true
//
// },
// fonts: {
// files: [
// {cwd: '<%= config.app %>', src: ['fonts/*'], dest: '<%= config.dist %>'}
// ],
// verbose: true,
// failOnError: true,
// ignoreInDest: ["css/**","*.html","js/**","images/**"],
// updateAndDelete: true
// },
},
compass: {
dev: {
options: {
specify: '<%= config.app %>/css/sass/main.scss',
cssDir: '<%= config.app %>/css',
outputStyle: 'expanded'
//noLineComments: true
}
},
prod: {
options: {
specify: '<%= config.app %>/css/sass/main.scss',
cssDir: '<%= config.dist %>/css',
outputStyle: 'compressed',
noLineComments: true
}
}
},
// Autoprefixer
autoprefixer: {
prod: {
options: {
browsers: ['last 3 versions', '> 1%', 'ie 8', 'ie 7']
},
files: {
'<%= config.dist %>/css/main.css' : '<%= config.dist %>/css/main.css'
}
}
},
cssmin: {
options: {
mergeIntoShorthands: false,
roundingPrecision: -1,
sourceMap: true
},
target: {
files: {
'<%= config.dist %>/css/main.min.css': ['<%= config.dist %>/css/main.css']
}
}
},
// Critical css
critical: {
inject: {
options: {
inline:true,
base: '<%= config.app %>',
css: [
'<%= config.dist %>/css/main.min.css'
],
width: 1440,
height: 900,
minify: true
},
src: '<%= config.app %>/*.html',
dest: '<%= config.dist %>/'
},
extract: {
options: {
//inline: false,
extract: false,
base: '<%= config.app %>',
css: [
'<%= config.dist %>/css/main.min.css'
],
width: 1440,
height: 900,
minify: true
},
files: '<%= templateName %>'
},
polymer: {
options: {
inline:'true',
base: '<%= config.app %>',
css: [
'<%= config.dist %>/css/main.min.css'
],
width: 1440,
height: 900,
minify: true
},
src: '<%= config.app %>/<%= polymerTemplateName %>.html',
dest: '<%= config.dist %>/'
}
// home: {
// options: {
// base: './',
// css: [
// '<%= config.dist %>/css/main.min.css'
// ],
// width: 1440,
// height: 900,
// minify: true
// },
// src: '<%= config.app %>/index.html',
// dest: '<%= config.dist %>/static-index.html'
// },
},
// Critical css external
// criticalcss: {
// // main:{
// all: {
// options: {
// url: "<%= config.dist %>/<%= templateName %>.html",
// width: 1440,
// height: 900,
// outputfile: '<%= config.dist %>/css/static-<%= templateName %>.css',
// filename: "<%= config.dist %>/css/main.min.css"
// }
// },
// Imagemin
imagemin: {
dev: {
options: {
optimizationLevel: 5
},
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: ['**/*.{png,jpg,gif,svg}'],
dest: '<%= config.dev %>/images/'
}]
},
prod: {
options: {
optimizationLevel: 5
},
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: ['**/*.{png,jpg,gif,svg}'],
dest: '<%= config.dist %>/images/'
}]
}
},
uglify: {
dev: {
options: {
compress: {
drop_console: false
}
},
files: [{
expand: true,
cwd: '<%= config.app %>/js/',
src: '**/*.js',
dest: '<%= config.dev %>/js/'
}]
},
prod: {
options: {
compress: {
drop_console: true
}
},
files: [{
expand: true,
cwd: '<%= config.app %>/js/',
src: '**/*.js',
dest: '<%= config.dist %>/js/'
}]
}
},
// Replace
replace: {
dev_HTML: {
options: {
patterns: [{
match: 'url_components/',
replacement: '../'
},{
match: 'url_custom_components/',
replacement: ''
},{
match: 'cssmain',
replacement: 'main'
}
]
},
files: [{
expand: true,
flatten: true,
src: ['<%= config.app %>/*.html'],
dest: '<%= config.dev %>/'
}
]
},
dev_JS: {
options: {
patterns: [{
match: 'url',
replacement: '<%= config.urlTest %>'
},{
match: 'version',
replacement: '<%= Math.floor((Date.now() / 1000)) %>'
}
]
},
files: [{
expand: true,
flatten: true,
src: ['<%= config.app %>/js/scriptloader.js'],
dest: '<%= config.dev %>/js/'
},{
expand: true,
flatten: true,
src: ['<%= config.dev %>/js/scriptloader.js'],
dest: '<%= config.dev %>/js/'
}
]
},
prod_HTML: {
options: {
patterns: [{
match: 'url_components/',
replacement: 'components/'
},{
match: 'url_custom_components/',
replacement: 'components/custom_components/'
},{
match: 'cssmain',
replacement: 'main.min'
}
]
},
files: [{
expand: true,
flatten: true,
src: ['<%= config.app %>/*.html'],
dest: '<%= config.dist %>/'
}
]
},
prod_JS: {
options: {
patterns: [{
match: 'url',
replacement: '<%= config.urlDist %>'
},{
match: 'version',
replacement: '<%= Math.floor((Date.now() / 1000)) %>'
}
]
},
files: [{
expand: true,
flatten: true,
src: ['<%= config.app %>/js/scriptloader.js'],
dest: '<%= config.dist %>/js/'
},{
expand: true,
flatten: true,
src: ['<%= config.dist %>/js/scriptloader.js'],
dest: '<%= config.dist %>/js/'
}
]
},
version: {
options: {
patterns: [{
match: 'version',
replacement: '<%= Math.floor((Date.now() / 1000)) %>'
}]
},
files: [{
expand: true,
flatten: true,
src: ['<%= config.dev %>/js/scriptloader.js'],
dest: '<%= config.dev %>/js/'
}]
}
},
// clean: {
// options: {
// 'force': true
// },
// build: {
// src: ['<%= config.dist %>/bower_components', '<%= config.dist %>/webcomponents']
// }
// },
copy: {
polymer_prod: {
files: [
// includes files within path
//{expand: true, src: ['<%= config.app %>/build/bundled/webcomponents/**/*'], dest: '<%= config.dist %>', /*filter: 'isFile'*/},
// includes files within path and its sub-directories
//{expand: true, src: ['<%= config.app %>/build/bundled/bower_components/**/*'], dest: '<%= config.dist %>'}
// makes all src relative to cwd
//{expand: true, cwd: '<%= config.app %>', src: ['<%= config.app %>/*'], dest: '<%= config.dist %>', filter: 'isFile'},
{expand: true, cwd: 'build/bundled/<%= config.dev %>', src: ['webcomponents/**/*'], dest: '<%= config.dist %>/components/custom-components'},
{expand: true, cwd: 'build/bundled/', src: ['bower_components/**/*'], dest: '<%= config.dist %>/components'},
// flattens results to a single level
//{expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'},
],
},
prod: {
files: [
{expand: true, cwd: '<%= config.app %>', src: ['fonts/**/*'], dest: '<%= config.dist %>'}
],
},
},
http: {
all: {
options: {
url: 'http://admin:888@<%= config.staging %>/<%= templateUrl %>',
timeout: 7000
},
dest: '<%= config.app %>/temporary-template/<%= downloadedTemplateName %>.html'
}
},
exec: {
polymer: {
command: 'polymer build',//'tools/vulcanize/vulcan.js -i <%= config.dist %>/index.html -o <%= config.dist %>//build.html',
//cwd:'',
'callback': function(){
var pkg = grunt.file.readJSON('package.json');
grunt.log.writeln("cartella BUILD di Polymer creata in 'source'. Compilo nella cartella ../wp-content/themes/" + pkg.theme + "...");
grunt.task.run(['copy:polymer_prod','critical:polymer','replace:prod_HTML']);
},
stdout: true,
stderr: true
}
}
});
grunt.loadNpmTasks ('grunt-http-server');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-sync');
grunt.loadNpmTasks ('grunt-contrib-copy');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.loadNpmTasks ('grunt-contrib-compass');
grunt.loadNpmTasks ('grunt-contrib-cssmin');
grunt.loadNpmTasks ('grunt-critical');
grunt.loadNpmTasks ('grunt-contrib-uglify');
grunt.loadNpmTasks ('grunt-replace');
grunt.loadNpmTasks ('grunt-contrib-imagemin');
grunt.loadNpmTasks ('grunt-contrib-clean');
grunt.loadNpmTasks ('grunt-http');
grunt.loadNpmTasks ('grunt-exec');
// grunt.loadNpmTasks ('grunt-minify-polymer');
// grunt.loadNpmTasks('grunt-vulcanize');
// Tasks
grunt.registerTask('start', function(){
grunt.file.mkdir(config.dev);
grunt.task.run(['compass:dev', /*'autoprefixer:dev',*/ 'sync',/*'critical', 'criticalcss',*/ 'uglify:dev', 'replace:dev_HTML', 'replace:dev_JS',/*'replace:version',*/'imagemin:dev','http-server:dev','watch']);
});
grunt.registerTask('server', [/*'sync:dev', */'replace:dev_HTML','http-server:dev','watch']);
grunt.registerTask('build', ['copy:prod','compass:prod', /*'compass:prod',*/ 'autoprefixer:prod', 'cssmin','uglify:prod','imagemin:prod',/*'critical:inject','criticalcss',*/'replace:prod_HTML','replace:prod_JS']);
grunt.registerTask('css', ['compass:prod', 'autoprefixer', 'criticalcss']);
grunt.registerTask('js_dev', ['uglify', 'replace:dev_JS', 'replace:version']);
grunt.registerTask('js_prod', ['uglify', 'replace:prod', 'replace:version']);
grunt.registerTask('images', ['imagemin']);
grunt.registerTask('polymer', function(){
var polymerTemplateName = grunt.option('template') || '*';
grunt.config.set('polymerTemplateName', polymerTemplateName);
grunt.task.run('exec:polymer');
});
grunt.registerTask('criticalcss', 'My "criticalcss" task.', function() {
var pkg = grunt.file.readJSON('package.json');
// var templates = grunt.file.expand({filter: "isFile", cwd: "../wp-content/themes/" + pkg.theme + ""},['*.html']);
var templates = grunt.file.expand({filter: "isFile", cwd: "src/temporary-template"},['*.html']);
//grunt.log.warn(templates);
var templatesCss = {};
templates.map(function (file) {
var name = file.replace(/\.[^/.]+$/, "");
// templatesCss["../wp-content/themes/" + pkg.theme + "/css/critical-" + name + ".min.css"] = "../wp-content/themes/" + pkg.theme + "/" + name + ".html";
templatesCss["../wp-content/themes/" + pkg.theme + "/css/critical-" + name + ".min.css"] = "src/temporary-template/" + name + ".html";
//grunt.log.warn(templatesCss);
});
grunt.config.set('templateName', templatesCss);
grunt.task.run('critical:extract');
});
grunt.registerTask('download', 'download template', function(){
var url = grunt.option('url') || '';
var name = grunt.option('name') || '';
pkg = grunt.file.readJSON('package.json');
grunt.config.set('templateUrl', url);
grunt.log.writeln("downloading template...");
grunt.config.set('downloadedTemplateName', name);
// if(url == ''){
// grunt.log.writeln("individuato template di homepage...");
// grunt.config.set('downloadedTemplateName', 'downloaded-index');
// }else if(url.indexOf('/') > -1){
// grunt.log.writeln("individuato template di tipo single page...");
// grunt.config.set('downloadedTemplateName', 'downloaded-single');
// }else{
// grunt.log.writeln("individuato template di tipo category...");
// grunt.config.set('downloadedTemplateName', 'downloaded-category');
// }
//grunt.log.warn(pkg.staging+"/"+url);
grunt.task.run('http');
});
// grunt.task.registerTask('new_critical', function(){
// grunt.config.set('templateName', template);
// grunt.task.run('criticalcss:template');
// });
};