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
}
}
Related
I'm evaluating task runners, Grunt and Gulp in particular, but there's one thing I dislike about both of them: the fact that they require a package.json file for your project. This is even though your project might not even be an npm project in the first place. In my case, I'm already using composer.json, which basically does the exact same thing.
I ended up creating my package.json like this:
{
"name": "myproject",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-phpcs": "~0.2.3",
"grunt-phplint": "0.0.5",
"grunt-phpdocumentor": "~0.4.1"
}
}
Note that I'm not maintaining the version number, as that is unnecessary overhead. This works though, in the sense that I can run my grunt tasks after executing npm install. I feel that I should be able to do without this file though. I read that it's possible to use Grunt without a package.json, but my take is that you'd then have to install the node modules manually, which is more overhead. Gulp is no different, or at least I found no evidence to the contrary.
So the question is, are there any task runners that don't require you to define your project's metadata twice, need only a single file, and are not too bleeding edge?
Answering myself, the only thing I could find that seems to fit my requirements is bldr. It is PHP based, uses composer as package management backend, and does it without hijacking the composer.json you might already be using, as it uses bldr.json instead. It also does not require you to add metadata to the file that describes your bldr dependencies. Here's an example dependencies file (taken from http://docs.bldr.io/en/latest/blocks.html):
{
"require": {
"acme/demo-block": "#stable"
}
}
Then, when you run bldr install, your dependencies are installed and you can run your bldr tasks.
I'm using grunt + bower + grunt-bower-task plugin to manage javascript library dependencies.
Say I have installed jquery with bower:
bower install jquery --save
and with grunt-bower-task:
bower: {
install: {
options: {
targetDir: './public/lib',
layout: 'byComponent',
install: true,
verbose: true,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
After running grunt bower, jquery will be copied to:
/public/lib/jquery/jquery.js
So the client will fetch jquery with url:
http://somedomain.com/public/lib/jquery/jquery.js
But I have question, what if I changed the jquery version?
Say I used another query version with bower, but it will still be copied to the same location and user will fetch it with the same url. If I have add cache-headers for it, user won't fetch new jquery.js code from server before expired.
How to fix this problem?
I think if we can add the version to the file name when running grunt bower, that will fix it, e.g.
http://somedomain.com/public/lib/jquery/jquery-1.8.js
But I can't find such functions in grunt-bower-task.
I would handle library versioning in the bower.json file. Yours should have the versions to be installed whenever you call the bower install command.. something like this
"dependencies": {
"angular": "~1.2.21",
"jquery": ">=2.1.1"
},
"resolutions": {
"jquery": ">=2.1.1"
}
But now they're all jquery.js regardless of the version. So now what you'd want to do is add some type of cache busting strategy which will force the browser to download the newest version of your scripts. There's tons of resource on cache busting javascript online, so I won't reiterate those here, but there are grunt tasks that can help you like this one
One slightly off topic suggestion I would make is to concat and minify your externals scripts into one js file and maybe another for your application scripts. As one or more of your external library change, the cache busting technique will force the browser to grab the latest version of your dependent scripts.
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().
First of all i have not really understood what gruntjs really does, but i have some idea. I am hoping that by seeing how and for what it is used i will come to see its purpose. So could anyone explain to me what is gruntjs, why it's used, and for what it's used.
Is it beneficial for indie developer or for team or both?
Is it only for big projects?
Is it just a trend/fad? And makes things uncomplicated for no reason?
So basically in short What are benefits of it and for whom?
Grunt is a task runner. That's all it does. If you're a Java guy, think Ant.
Developers use Grunt to automate the running of tasks, especially sequences of tasks. Some of those tasks are so prevalent, such as linting JavaScript, running unit tests, or minifying JavaScript, that they're packaged up as plugins and freely available for you to use. For example, grunt-contrib-clean is a plugin that contains a clean task. This task simply deletes the contents of a list of directories, a common step in a build process. To use it, you first pull the plugin into you Gruntfile.js using
grunt.loadNpmTasks('grunt-contrib-clean');
and then configure the clean task to clear your hypothetical minified directory using
grunt.initConfig({
clean: [ 'minified' ]
});
You can now run the clean task from the command line using
grunt clean
To visualise its potential, imagine a task that cleans a directory, then runs Jasmine unit tests using Karma, then lints and compiles LESS files, minifies and concatenates JS files, and packages them up for deployment, or outright deploys them.
So to answer your questions
it can be beneficial to anyone working on the project
the benefit is proportional to how many repetitive tasks you have to deal with
it's a tool, not a trend/fad, and it simplifies processes, not overcomplicates them
want to do pre required task before running project then grunt is best.
Means task required for running project
In grunt we can use add task .Common task like
browserify : In our project we crate multiple file by name convention for better understanding. But when we want to run the project you have to include all files rather than you can just combine all file in one file at the time for deploy project it will reduces your server time to include all files
just like include in Gruntfile.js
uglify:{
app: {
src: ['app/**/*.js'],//include all js file in app folder
dest: 'public/site.js'//one file
}
}
grunt.loadNpmTasks('grunt-browserify');//use npm task for browserify
Register Task : In project we use diff environment.If you want manage what thing to be run before the deploy by each environment.
Just like task required for only Env Dev watch task
grunt.loadNpmTasks('grunt-contrib-watch');
For this you register task dev
env: {
development: { NODE_ENV: 'development' },
staging: { NODE_ENV: 'staging' },
production: { NODE_ENV: 'production' }
}
grunt.registerTask('dev',['env:development','watch']);//list of task required only for dev env
grunt.registerTask('production',['env:production']);
I'm new to the Yeoman/Grunt/Bower stack and I'm unsure if there is a proper way to remove a component/task from my project. I don't use CoffeeScript (which was packaged with the Yeoman generator) and it feels like I should be using a Grunt task or Bower command to remove the files/requirements/config/etc.
However, I can't find anything mentioning how to do this. Am I missing something or should I just remove the components by hand?
I don't believe there is an automated way of doing this; save for https://github.com/indieisaconcept/grunt-plugin but that's for the old release (0.3.9) of Grunt.
For Grunt tasks, simply remove the line in devDependencies in package.json and then remove the relevant section in grunt.initConfig and you will have uninstalled the plugin. Depending on how your Gruntfile looks, you may have to remove the grunt.loadNpmTasks(<package>) section for the relevant plugin. Then remove the directory in node_modules (or run npm uninstall <package>). Simple really.
Bower is even easier; remove the relevant line in bower.json and delete the directory it was installed (the default is bower_components).
Hope this helps. :)
You can remove a Grunt task by running the following command:
npm uninstall grunt-task-name --save
...where grunt-task-name is the name of the task you want to remove. The --save flag tells npm to update your package.json file as well as deleting the relevant package from your node_modules directory. (nb. if the task is listed under devDependencies - as it might well be - you might need to use the --save-dev flag instead).
For Bower the process is the same, only with bower uninstall instead of npm uninstall (as mentioned in Michael Onikienko's answer)
For Bower components:
bower uninstall componentName --save
This command will uninstall component from bower.json and from bower_components folder.