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/
Related
What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do
pleeease watch
Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.
Unfortunately it seems the author has stopped maintaining it, when I do
npm install pleeease
on my new server I got lots of errors and the installation failed.
I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.
However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like
[postcss|autoprefixer|something else] watch
under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.
So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
5) What is the difference between npm install postcss and npm install grunt-postcss?
"What I want to do is simply have a tool that can watch and auto prefix my css."
Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe($.sass())
.pipe($.autoprefixer())
.pipe(gulp.dest('dest'));
});
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
Yes.
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
It's better to install locally like so:
npm i postcss-cli --save-dev
Then you can use like so:
node_modules/postcss-cli/bin/postcss -c config.json
Or, add a script in package.json like so:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/postcss-cli/bin/postcss -c config.json",
"watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
"minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},
Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:
...
"build": "postcss -c config.json"
...
You can then run:
npm run build
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
Nope. PostCSS-cli can do this:
node_modules/postcss-cli/bin/postcss -c config.json -w
Or, add as script to package.json as can be seen in my example above. Then you just run:
npm run watch
5) What is the difference between npm install postcss and npm install grunt-postcss?
The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.
To use autoprefixer with postcss-cli on the command line you do:
postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css
This is listed in the docs and is pretty easy to follow.
I am working with grunt and when I write "grunt build" my dist folder builds everything, except for the js files. I get the following message:
I'm guessing I have to edit my Gruntfile, but I'm not sure how to go about solving this.
My Gruntfile is long, but here is the uglify part:
What does it mean by the destination was not written because src files were empty
It means the files listed in dist: {src:"<%config.app%>*" were not created yet. Use the following process:
Run copy and uglify manually and verbosely
grunt copy:dist --verbose
grunt uglify:dist --verbose
If it works, reorganize the task in question in the registerTask method:
grunt registerTask("build", ['copy:dist','uglify:dist']);
Otherwise, dump the <%config.app%> path to make sure it is correct
grunt.registerTask('dump', 'Dump Output', function(){ console.log(grunt.config.get() ) });
References
Grunt API: grunt.config.get
Grunt Documentation: Using the CLI
It seems like if want to runt grunt on a "clean" machine we must write an external script that runs "npm install" first.
Is there a way to make grunt run first "npm install" to install its plugins in devDependencies?
Grunt is just a node module and like any other module it's uses npm for dependency management. As I know, npm itself can not be accessed programmatically from modules.
But your questions can be solved in the grunt-way. Grunt has an interface called grunt.task.exists. You can use it for checking if the tasks were loaded and if something's not, then run grunt-shell's task containing npm install. One of the ways to implement this is to dynamically create aliases:
function safeTasks(tasks) {
exists: for (var task in config) {
if (!grunt.task.exists(task)) {
tasks.unshift('shell:dependencies');
break exists;
}
}
return tasks;
}
grunt.registerTask('default', safeTasks(['one', 'another']));
Where config is the object passed to grunt.initConfig().
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
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.