My team currently works on multiple projects which all have their own gruntfile.js file. But they're all about the same, copied-pasted on every new project... Which is not good at all !
I'm searching for a way to maintain only one gruntfile.js and share an up-to-date version between all the projects. I see two ways of doing this : deploy the shared gruntfile.js to some path accessible through our internal network and ...
... use grunt --gruntfile = /path/to/share/gruntfile.js taskName on every call to a grunt task inside any project directory. A Jenkins build could keep the shared file up-to-date, re-deploying it on commit. In this way, a project wouldn't have its own gruntfile.js file anymore.
... inside the proper gruntfile.js of every project, find a way to tell grunt to import everything (tasks, configInit, etc.) declared in the shared gruntfile.js. Like it would be done with Maven pom.xml files having a parent pom.
Does anyone see a reason why one or both solutions wouldn't work ?
Does anyone know a simple way of doing this, maybe using an existing tool or plugin ?
Edit: We're on SVN, not GIT.
Finally, I found a way to share tasks declaration over multiple projects : I created a custom grunt plugin. This plugin contains :
custom-grunt-plugin
|_ config
|_ config.js : contains all the tasks configurations
|_ tasks
|_ custom-grunt.js : contains all the tasks declarations
|_ package.json : package info
|_ README.md : package documentation
I published my plugin and added it as a devDependency of all my projects.
Finally, the grunfile.js of all my projects :
module.exports = function (grunt) {
// Load custom tasks
grunt.loadNpmTasks('custom-grunt-plugin');
// Load grunt tasks automatically
require('load-grunt-tasks')( grunt );
// Load configuration from the custom grunt plugin
var config = require('custom-grunt-plugin/config/config');
// Add project specific variables to the config
config.pkg = grunt.file.readJSON('package.json');
config.paths = {
app: 'app',
dist: 'dist/<%= pkg.name %>/<%= pkg.version %>'
};
grunt.initConfig( config );
};
That's all ! Probably not the best solution. But this one works.
The next step would be to transfer the list of dependencies from the package.json of the projects to the package.json of the custom plugin, and install all dependencies recursively with 'npm install'. But it seems npm can't load and install the dependencies of the dependencies...
Related
Is there any util with we can build project using gulp on vendor/src files same as symfony assetic system?
I mean bundle inheritance.
My gulp is set on vendor files and compile resources to web catalog, but i didn't found possibility that gulp recognize if files were override by my bundle in src/ catalog
I think you should use the plugin Gulp Watch (https://www.npmjs.com/package/gulp-watch/) and make a watch task that will check if a file changed.
If a file change you gulp watch task will launch another task to compile your files or just copy them.
Your watch should look like this
gulp.task('watch', function () {
gulp.watch(app + '/scss/**/*.scss', ['sass']); // If a scss file change it will run my sass task
gulp.watch(app + '/img/**/*.{jpg,jpeg,png,gif,svg}', ['images']); // If there is a new image it will run my images task
});
You can do it with other file html js etc
I hope this will help you.
Here's what I want to do:
Create a node package that features the following:
gulpfile.js
All gulp plugins, tasks, configs.
Install this node package (referred to as "my-gulp" from here on) within an Angular app (referred to as "myApp" from here on) via package.json dependencies.
gulpfile.js is copied into app root.
All Gulp tasks can be run from app.
We currently have something similar setup with Grunt (although without the Gruntfile.js copy stuff). It works pretty well to have a common setup for each of our apps, but also several custom Bower components. Just have to bring it in as a dependency and it magically works.
The main issue I've run into so far is when I add my-gulp to myApp's dependencies, run the install, my-gulp comes in just fine, however the individual plugins (my-gulp dependencies) aren't seen. They're installed, but running something like gulp default or whatever shows them missing.
I've tried to setup Gulp dependencies (in my-gulp) under "dependencies" as opposed to "devDependencies", yet still not quite working.
Does anyone have any experience doing something like this?
Am I doing something blatantly stupid here?
Any help is awesome!
Thanks, everyone :)
The problem is the way npm handles nested dependencies. When you install your "my-gulp" package, the directory tree looks like this:
| myApp
|-- node_modules
|-- my-gulp
|-- node_modules
|-- gulp_dependency
As you can see, the dependencies of "my-gulp" are buried inside its own node_modules directory. myApp cannot access them.
You could use something like npm-flatten to move those to the top directory. Otherwise you'll be forced to add each dependency to myApp's package.json.
Edit:
As indicated in your gist, you can load the dependencies by path instead of package name. Instead of copying your gulpfile, simply require it from myApp, then load its dependencies with a relative path:
// myApp/gulpfile.js
require('my-gulp/gulpfile.js');
// my-gulp/gulpfile.js
var gulpDep = require('./node_modules/gulp-dependency');
Note: This won't work if you use npm dedupe.
I want to run grunt on several projects simultaneously. However i'm not sure how to setup so it works. Here's what my setup looks like:
- Project 1 folder
-[project files]
-Gruntfile
- Project 2 folder
-[project files]
-Gruntfile
- Grunt Folder
-[nodeModules]
-package.json
So the idea is that have all grunt dependencies (node modules) in a single centralised folder. Then each project folder has its own Gruntfile.
The problem I have is that I don't know how to setup the gruntFile so that it can use the node modules and package.json from the grunt dependancy folder.
Can anyone help me with how I can get this to work? Specifically with code examples.
In my meteor project I want to use gulp for tasks meteor doesn't support.
Anyway, the problem is that gulp uses a file called gulpfile.js which is loaded by meteor too and gives errors. So my question is, is there a way to tell meteor to ignore some files ?
UPDATE: One solution I can think of is to put gulpfile.js in the folder packages or public and run gulp as follows
$> gulp --gulpfile packages/gulpfile.js
UPDATE: Just noticed that meteor also seems to load node_modules files :(
Unfortunately, in the current release there's no way to tell Meteor to leave certain files alone, so you cannot have gulpfile.js in your main app folder.
You can, however, leave it in an ignored subfolder. Meteor ignores files and directories that ends with tilde ~, the /tests directory and all private files (those beginning with a dot .). So you can create a folder named for example gulp~ and use it for your gulp-related stuff.
The same holds for node_modules folder, you cannot have it in your application, and you shouldn't. If you want to use a node package in your Meteor application, you can do this with npm package.
Add it to your project with mrt add npm command.
Then create packages.json file with a list of all required packages, for example:
{
"something": "1.5.0",
"something-else": "0.9.11"
}
Afterwards, include your package with Meteor.require:
var something = Meteor.require('something');
If you want to use a node package in your gulp tasks, install it inside the ignored directory.
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']);