Using autoprefixer in grunt for the first time - gruntjs

I have the current version of npm installed and things seem to be OK:
The autoprefixer loads up just fine :
I created a file 'Grunfile.js'in the local project folder:
I am running this on windows 8.1
Where to from here? How do I tell grunt to check the file? How do I call the function from the command line ? Or do I call the function from the command line?

Within your directory you'll need to have 2 files, the package.json and the Gruntfile.js. To create a package.json file run the command npm init.
Next, you need to add the grunt-autoprefixer task to your package.json file which you can do by running npm install grunt-autoprefixer --save-dev.
Then, within the Gruntfile.js it should look something like this:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'autoprefixer'
]);
};
For more details on editing the settings on autoprefixer check out the documentation: https://github.com/nDmitry/grunt-autoprefixer
To learn more about Grunt check out https://learngrunt.com

Related

laravel mix sass images not found/hash

I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},

Grunt Task "default" not found

I'm new to use grunt, I just create a real sample to run. But I get blocked my A warning Warning: Task "default" not found
I just copied sample from http://gruntjs.com/getting-started
My package is
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
my Gruntfile.js is
module.exports = function(grunt) {
grunt.registerTask('default', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
};
it just print some simple log, why it doesn't work?
Copying the pasting the code from the grunt page won't do anything by itself. Did you first install grunt by console: npm install -g grunt-cli ?
Grunt is a task runner; that is, it does not have the ability to do the task itself, but starts the program listed in the gruntfile, runs the program on the noted files or folders, and stops each task before going on to the next.
You'll need to make sure that the JSHint program has been installed on your system before running grunt, or grunt won't run that task. You'll enter this in your console to install it: npm install grunt-contrib-jshint --save-dev
Grunt doesn't know what files to run JSHint on, so you'll need to tell it where to look. To do that, you'll need to carefully read the grunt-contrib-jshint page in the npm plugins site at http://gruntjs.com/plugins.
In addition, JSHint has these options: http://jshint.com/docs/options/ You'll need to learn the correct syntax to put them in the gruntfile.
Grant makes repetitive tasks simpler, but you'll still need to do a bit of homework to put all the different pieces together to get it working for you.
I wrote a complete article on getting started in grunt, based on my own learning: https://iphonedevlog.wordpress.com/2016/10/31/how-to-use-grunt-to-automate-repetitive-tasks/

GruntJS refuses to work. Task default or every other was not found

I'm trying to setup gruntJS on my local machine. These are the steps I have already done:
Install nodeJS
Download gruntJS in a root folder of project with command:
npm install -g grunt-cli
Download grunt also in a root folder of project with:
npm install grunt
Also, I have created Gruntfile.js and here is content of it:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
css: {
src: 'templates/folder1/css/*.css',
dest: 'app.min.css'
}
},
});
};
And I was expected how this will work and minimize all css files and move it to the root ( because destination specified as root ).
I need to say how I was follow this tutorial:
https://www.youtube.com/watch?v=q3Sqljpr-Vc
And I really don't know what I do wrong.
Here is how I call grunt and error ( its better to say warning message ) which I get:
C:\wamp\www\myProject>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.
you need to install some tasks for use. From your example i would guess you are trying to minify some CSS?
For that i would use the grunt-contrib-cssmin task. To use first install using
npm install grunt-contrib-cssmin
you will also need to register the task at the bottom of your gruntfile like this grunt.loadNpmTasks('grunt-contrib-cssmin').
then your gruntfile will look like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
minify: {
src: ['templates/folder1/css/*.css'],
dest: 'app.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('min' ['cssmin']);
};
For more info i recommend you read the documentation and familiarise yourself with the examples at http://gruntjs.com/sample-gruntfile

Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked
recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried:
grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
But can't get it to work. Any ideas how to get Grunt to work with VS 2013.
Note: I've Installed Node.js and recess earlier, then > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.
I've got this working in a slightly different way:
Ensure you've got grunt-cli installed globally (npm install -g grunt-cli)
Create a Gruntfile.js in your project or solution, and define a target to do whatever less compiling you want (e.g. less)
Add call grunt less to your pre-build event (if you don't specify CALL, then the process doesn't return after grunt)
You can add different targets to the development and production build processes if you like. You can also set up more targets for other tasks - I have one so I can run grunt watch to automatically recompile my CSS if I edit less files.
Step-by-step guide to converting the VS2013 sample project to use less and Grunt:
Remove bootstrap and install bootstrap less:
Uninstall-Package bootstrap
Install-Package Twitter.Bootstrap.less
Open a command prompt and cd to your project directory
Ensure grunt-cli is installed globally:
npm install -g grunt-cli
Create a package.json file:
npm init
Install grunt and grunt-contrib-less locally:
npm install grunt grunt-contrib-less`
Create a file in your project called Gruntfile.js with the following contents:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
sourceMap: true,
dumpLineNumbers: 'comments',
relativeUrls: true
},
files: {
'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less',
}
},
production: {
options: {
cleancss: true,
compress: true,
relativeUrls: true
},
files: {
'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less',
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-less');
// Default task(s).
grunt.registerTask('default', ['less']);
grunt.registerTask('production', ['less:production']);
grunt.registerTask('dev', ['less:dev']);
};
Edit your Visual Studio pre-build event to include:
cd $(ProjectDir)
call grunt --no-color
(--no-color removes some of the control characters from the Visual Studio build output)
Build your project, then enable show all files, and incldue the two compiled css files in your project (so that web deploy picks them up).

Grunt concat failing with "Unable to find local grunt"

I have installed Grunt like so `npm install -g grunt-cli successfully.
I have also installed the grunt-contrib-concat libary succesfully like so: npm install grunt-contrib-concat --save-dev
I have created a package.json:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}
and a Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/init.js', 'src/Game.js', 'ui/Ui.js', 'ui/AddBTS.js', 'ui/Toolbar.js'],
dest: 'built.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
Now when I run grunt concat I get the following error:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
This is my first time using Grunt and I've been trying to solve this problem for over 2 hours now. Please could someone help me and advise what I've not set up correctly.
Thanks in advance!
It's likely that Grunt is not installed locally in your project folder (which is different than grunt-cli). You have it in your package.json so try doing npm install or alternately npm install grunt.
For more information see the getting started page:
Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

Resources