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().
Related
I want to try parceljs for minifying and bundling.
I have installed the parcel-bundler with npm, and i tried creating a index.js, main.js and main.css for testing.
main.css
.main
{
color: red;
}
main.js
import classes from './main.css';
export default () => {
console.log(classes);
};
index.js
import main from './main';
main();
In my layout.cshtml file i have included the index.js file, but this is where im stuck.
I know that i can run parcel from powershell\cmd, and it says the server is running on port 1234. However, i want to use dotnet run.
When running dotnet run like i normally do i get "Unexpected token" from the index.js file. I guess parcel does not run when starting dotnet run.
I'm having the same problem. If you just want to run Parcel without the server you can do parcel watch index.js but you'll have to have this running at the same time as dotnet to get Hot Module Reloading. What we really need is the Parcel equivalent of WebpackDevMiddleware.
Another option is to use something like Concurrently to run both commands at the same time. You could then setup an NPM script like this:
"scripts": {
"dev": "concurrently \"dotnet run\" \"parcel watch index.js\""
}
and run:
npm run dev
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'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/
I’m using grunt to develop a website, and was wondering if it’s possible to update bower dependencies in my project within my 'build' grunt task—so that when I build a production version of my project, everything is up–to–date?
Obviously, I know I could just execute bower update before grunt build:prod, but it would be one less step every time.
Just curious!
Grunt has this task called grunt-bower-task which can help you manage bower dependencies. Use the official grunt documentation to go through the details.
Found one possible solution:
I guess I could use grunt-shell to automate running the bower update command in a shell…
Just wondering if this is the most logical/sophisticated way of doing it. Any other suggestions?
Found a good solution—I’ll post it in case it’s of use to someone…
The grunt-bower-install-simple plugin allows you to update bower dependencies from a grunt task by setting the command option to update like so:
"bower-install-simple": {
options: {
color: true,
directory: "src/bower_components"
}
"prod": {
options: {
command: update,
production: true
}
}
I've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.