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.
Related
I am currently trying bootstrap and attempting to use grunt to process my less source files and generate my css.
I have achieved this by installing bootstrap and grunt via npm and then copying the generated bootstrap folder over to my project folder.
myproject/bootstrap
I have then run npm install to setup grunt based on the bootstrap package.json.
Once the install has completed the boostrap directory contains over 20 thousand files.. is this normal?
I also wanted to change the directory from dist...to a css directory within the myproject folder so my dir structure would look something like this
myproject/src/bootstrap - All the src grunt/less files would go here.
myproject/public/css/ - This would be the new dist directory for the resultant css files.
However I have attempted to adjust the Gruntfile.js in order to change the dist directory... but there I have not manged to get it to export to anything outside of the source bootstrap directory?
I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs
I currently try to get myself into ASP.Net 5 development, and I'm struggling to find the "way to go" for using Bower in this.
My project structure looks more or less like this:
testProject
- wwwroot
- index.html
- bower_components (hidden by default in project.json)
- angular
- ...
- ...
- node_components (hidden by default in project.json)
- grunt
- ...
- ...
- bower.json
- Gruntfile.js
- package.json
- project.json
- Startup.cs
I can't access bower_components in index.html and as it's not included in the project by default I guess it's meant this way.
So what's the expected way to work with the bower libraries?
I've seen many people are using grunt-bower-task to install the libraries once again into wwwroot/lib (or some other folder in the wwwroot), but this seems kind of redundant to me as Visual Studio already installs the packages into the project directory.
An alternative would be to use use grunt-copy to move the files from bower_components into the target folder, but with this way you would have to list every library you want to include once again.
So has anyone already gained some experience with this handling and would share how you are doing this?
Hmmm.. Didn't sure I understand the problem right, but anyway, if the problem just in bower destination folder, just add .bowerrc file to your root with content like:
{
"directory" : "wwwroot/lib"
}
and after bower install command, bower will download libs in your dest folder
I have a dist folder inside semantic-ui zip file that I downloaded (version 1.8.1 to be precise)
Is this folder the only thing i need to deploy my Web Application as far as semantic-ui related files are concerned?
Would including semantic.js and semantic.css be enough for my web application?
I am asking this question as I want to eliminate the need of installing npm and gulp on my target machines and would just like to copy over the css and js files that are needed by the application.
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
If I install any grunt plugin, it is added to a folder named "node_modules" in the root of my project dir per default.
My question: is it possible to move this whole folder (and therefore all plugins) to another location (but still within my project folder), let's say to "build/node_modules" ?
Of course, I still want to be able to run grunt from anywhere in my project hierarchy after this change.
Nope, that's a feature of the Node.JS core files. In the case you don't know, Node.JS is the platform which Grunt was built.
All require() calls which don't point to an absolute file or start with ./ will try to find modules inside node_modules folders.
You can use symbolic link ln -s /original_node_modules_path/node_modules ./node_modules