I am create gruntfile and install all needed dependencies.
In tutorial all worked fine but not for me.
If i try to run this gruntfile i see this error message:
Error: Cannot find module 'pixrem'
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Where is mistake? If you can please correct the mistakes in the answer.
Gruntfile is here:
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
watch : {
images : {
files : ['images/src/**/*.{png,jpg,gif}'],
tasks : ['newer:imagemin']
}, // watch images added to src
deleting : {
files : ['images/src/*.{png,jpg,gif}'],
tasks : ['delete_sync']
}, // end of delete sync
scripts : {
files : ['js/libs/*.js', 'js/custom/*.js'],
tasks : ['concat', 'uglify'],
options : {
spawn : false,
}
}, //end of watch scripts
css : {
files : ['sass/**/*.scss'],
tasks : ['sass', 'postcss', 'penthouse'],
options : {
spawn : false,
}
}, //end of sass watch
grunt : {
files : ['gruntfile.js']
}
}, //end of watch
/* ====================================================================================================================================================
* ====================================================================================================================================================
Tasks
====================================================================================================================================================
====================================================================================================================================================
*/
delete_sync : {
dist : {
cwd : 'images/dist',
src : ['**'],
syncWith : 'images/src'
}
}, // end of delete sync
imagemin : {
dynamic : {
files : [{
expand : true, // Enable dynamic expansion
cwd : 'images/src/', // source images (not compressed)
src : ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest : 'images/dist/' // Destination of compressed files
}]
}
}, //end imagemin
concat : {
dist : {
src : ['js/libs/*.js', 'js/custom/*.js'],
dest : 'js/build/production.js'
}
}, //end concat
uglify : {
dist : {
src : 'js/build/production.js',
dest : 'js/build/production.min.js'
}
}, //end uglify
sass : {
dist : {
options : {
style : 'nested', //no need for config.rb
compass : 'true'
},
files : {
'css/main.css' : 'sass/main.scss'
}
}
}, //end of sass
postcss : {
options : {
map : true,
processors : [require('pixrem')(), // add fallbacks for rem units
require('autoprefixer-core')({
browsers : 'last 2 version, IE 9'
}), // add vendor prefixes. for more: https://github.com/ai/browserslist
require('cssnano')() // minify the result
]
},
dist : {
src : 'css/main.css'
}
},
penthouse : {
extract : {
outfile : 'css/critical.css.php',
css : 'css/main.css',
url : 'http://localhost/grunt-boilerplate',
width : 1200,
height : 500
},
}, //end of penthouse
browserSync : {
dev : {
bsFiles : {
src : ['css/*.css', 'images/*.*', 'js/build/production.min.js', '*.php', 'includes/*.php', '!.sass-cache']
},
options : {
proxy : "localhost/grunt-boilerplate",
watchTask : true
}
}
},
ftpush : {
build : {
auth : {
host : 'ftp.yourwebsite.com',
port : 21,
authKey : 'key1' //ftp login is in the .ftppass file
},
src : './', //root
dest : '/www', //destination folder
exclusions : ['.sass-cache', '.git', 'images/src', 'node_modules', '.gitignore', '.ftppass', 'gruntfile.js', 'README.md', 'package.json'], //remember adding '.ftppass' to the exclusions in .gitignore if you are publishing the repo to github
// keep : ['blog','cv','projects'], // SUPER IMPORTANT! check what resources should STAY on the server, for example your wordpress installation or other subfolders you use for other projects. else they'll get wiped out
simple : false,
useList : false
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-delete-sync');
grunt.loadNpmTasks('grunt-penthouse');
grunt.loadNpmTasks('grunt-ftpush');
// define default task
grunt.registerTask('default', ["browserSync", "watch"]);
};
strong text
try npm i -S pixrem then retry your grunt command.
Related
I configured a Grunt project and I am trying to run livereload.
But I cant get it to work, I included the livereload script tag in my HTML document.
Script tag inside HTML doc (body)
<script src="http://0.0.0.0:35729/livereload.js"></script>
Grunt file
module.exports = function(grunt) {
//project configurations
grunt.initConfig({
clean: {
build: {
src: ['dist']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/css/compiled.css':'sources/scss/main.scss'
}
}
},
uglify : {
options : {
banner : "/*! app.min.js file */\n",
style: "compressed"
},
build : {
src : ["sources/js/app.js"],
dest : "dist/js/app.min.js"
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
options: {
livereload: 35729
}
}
},
connect: {
server: {
options: {
port: 8000,
hostname: '*',
base: {
path: '.',
options: {
index: 'index.html'
}
},
onCreateServer: function(server, connect, options) {
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask("default", ["clean", "connect","sass", "uglify", "watch"]);
};
I am not sure whats going on, I see that the changes to the SCSS files are being picked-up and after a hard refresh it the changes are visible, but not due to livereload.
Edit: Now it works, I added the script tag inside the head, while I was reading that it needed to be before closing the body tag.
In a nutshell, I am trying to output my css assets using the extract-text-webpack-plugin. I would expect that the bootstrap loader would spit out a bootstrap.css but this is not the case. I'm thinking I might have to add a include 'webpack-loader/path/to/css' in my app.js, but something about that feels chintzy and against the purpose of webpack.
Below is the most minimal webpack.config.js I can create that represents the issue. The configuration assumes that the webpack.bootstrap.config.js and .bootstraprc files are located in the same directory as the webpack.config.js
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bootstrapEntryPoints = require('./webpack.bootstrap.config');
const extractCssPlugin = new ExtractTextPlugin({
filename : '[name].css'
});
module.exports = {
entry : {
app : "./src/js/app.js",
bootstrap : bootstrapEntryPoints.dev
},
output : {
path : path.resolve(__dirname, 'dist'),
filename : "[name].bundle.js"
},
module : {
rules : [
{ test: /\.css$/, use : extractCssPlugin.extract({use : [{loader: "css-loader"}]})},
{ test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(ttf|eot)$/, loader: 'file-loader' },
]
},
devServer : {
contentBase : path.join(__dirname, "dist"),
hot : true,
},
plugins : [
extractCssPlugin,
],
};
NOTES :
bootstrapEntryPoints.dev resolves to 'bootstrap-loader'. Meaning that my bootstrap entry point looks like entry : {..., bootstrap : 'bootstrap-loader'}
Solution - I set the extractStyles variable in the .bootstraprc to true. I can now sleep with peace.
I have a little big problem with BrowserSync version for Grunt.
PROBLEM:
If I edit .php files - BrowserSync work good but if I edited .less files, nothing happened but in bash I can still see:
[BS] File changed: d:\localhost\htdocs\www\wordpress\wp-content\themes\MYPROJECTNAME\css\main.css
Can somebody please help me to setup correctly:
GRUNT + LESS + BrowserSync running on XAMPP (because of WordPress)?
My gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
// Watch task config
watch: {
less: {
files: ['less/**/*.less'],
tasks: ['less']
}
},
// less task config
less: {
dev: {
files: {
"/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/css/main.css" // destination
:
"less/main.less" // source file
}
}
},
// Using the BrowserSync Proxy for your existing website url.
browserSync : {
dev : {
bsFiles : {
src : [
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.php',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/images/*.*',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/_dev/less/**/*.less',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.css',
]
},
options : {
watchTask: true,
debugInfoě: true,
logConnections: true,
notify: true,
proxy: "localhost/www/wordpress",
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// register a default task.
grunt.registerTask('default', ['less', 'browserSync', 'watch']);
};
Thanks all! :-)
Here is my setting
var root = 'localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/';
browserSync : {
dev : {
options : {
files: [root+'style.css',
root+'js/**/*.js',
root+'**/*.php'],
watchTask: true,
debugInfoe: true,
logConnections: true,
notify: true,
proxy: "localhost/www/wordpress",
}
}
}
});
I have a directory tree full of haml and jade files. How do I use grunt to compile the whole structure into a matching directory tree of html?
Is it possible to use grunt watch to compile changed files into the correct location in the output directory hierarchy?
First you need to install grunt-haml2html (former grunt-contrib-haml)
npm install grunt-haml2html --save-dev
Then add to Gruntfile
grunt.initConfig({
haml: {
main: {
files : [
{ expand: true, cwd:'src', src: '**/*.haml', dest: 'dest', ext : '.html' }
]
},
watch: {
files : {}
}
},
watch: {
haml: {
files: '**/*.haml',
tasks: ['haml:watch'],
options: {
spawn: false
}
}
}
});
grunt.event.on('watch', function(action, filepath) {
if(filepath.indexOf('.haml') === -1) return;
var file = {};
var destfile = filepath.replace('.haml','.html');
file[destfile] = filepath
grunt.config('haml.watch.files', file);
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-haml2html');
Now only changed file will compile
To compile a whole folder use grunt haml:main
So I'm new to Grunt and have been trying to implement a workflow for it and Jekyll. So I have a watch task running but it seems to fail to interrupt the current serve task before trying to start Jekyll again because I get an error about port binding, specifically jekyll 2.0.3 | Error: Address already in use - bind(2)
It could be me doing something stupid or not understanding something but does anyone have any ideas? Here's my gruntfile:
module.exports = function( grunt ) {
// load time-grunt and all grunt plugins found in the package.json
require( 'time-grunt' )( grunt );
require( 'load-grunt-tasks' )( grunt );
grunt.initConfig({
csslint : {
test : {
options : {
import : 2
},
src : [ 'css/main.css' ]
}
},
cssmin : {
dist : {
src : 'css/main.css',
dest : 'css/main.min.css'
}
},
shell : {
jekyllBuild : {
command : 'glynn'
},
jekyllServe : {
command : 'jekyll serve'
}
},
watch : {
files : [ '_layouts/*.html',
'_posts/*.md',
'css/main.css',
'_config.yml',
'index.html',
'404.html' ],
tasks : [ 'cssmin',
'shell:jekyllServe' ],
options : {
spawn : true,
interrupt : true,
atBegin : true,
debounceDelay: 250
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-shell');
// register custom grunt tasks
grunt.registerTask( 'lintcheck', [ 'cssmin','csslint', 'shell:jekyllServe' ] )
grunt.registerTask( 'qbuild', [ 'cssmin', 'shell:jekyllServe' ] )
grunt.registerTask( 'deploy', [ 'cssmin', 'shell:jekyllBuild' ] )
};
Any help would be much appreciated.
You got an error because you tried to run jekyll serve more than once (while server was already running). As you can read in the docs, jekyll serve runs a development server at localhost:4000 (http://jekyllrb.com/docs/usage/) so you can fire it only one on a particular port at the same time. After that you need only rebuild jekyll into ./_site when some files changed. You can do that with jekyll build.
I modified your Gruntfile:
module.exports = function( grunt ) {
// load time-grunt and all grunt plugins found in the package.json
require( 'time-grunt' )( grunt );
require( 'load-grunt-tasks' )( grunt );
grunt.initConfig({
csslint : {
test : {
options : {
import : 2
},
src : [ 'css/main.css' ]
}
},
cssmin : {
dist : {
src : 'css/main.css',
dest : 'css/main.min.css'
}
},
shell : {
jekyllBuildLocal : {
command : 'jekyll build'
},
jekyllBuild : {
command : 'glynn'
},
jekyllServe : {
command : 'jekyll serve'
}
},
watch : {
files : [ '_layouts/*.html',
'_posts/*.md',
'css/main.css',
'_config.yml',
'index.html',
'404.html' ],
tasks : [ 'cssmin',
'shell:jekyllBuildLocal' ],
options : {
spawn : true,
interrupt : true,
atBegin : true,
debounceDelay: 250
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-shell');
// register custom grunt tasks
grunt.registerTask( 'lintcheck', [ 'cssmin','csslint', 'shell:jekyllBuildLocal' ] )
grunt.registerTask( 'qbuild', [ 'cssmin', 'shell:jekyllBuildLocal' ] )
grunt.registerTask( 'deploy', [ 'cssmin', 'shell:jekyllBuild' ] )
};
And what I recommend you for development is to run:
grunt shell:jekyllServe
grunt watch (I guess in other terminal window)
This should work properly
I'm developing a site with a similar workflow but with Gulp instead of Grunt. I swapped the default jekyll server with browserSync, which also auto-reloads pages when changes are made (useful in development). This is an example Gulp build file; a Grunt-equivalent can be made.