So i started using grunt, ran through some tutorials but somehow i haven't found an easy way of initialising a new project with all the predefined plugins in your default gruntfile.js?
So, yeah, i got that everytime you have to reinstall grunt locally with cd your-working-dir and then npm install grunt --save-dev?
Then i have my gruntfile.js which, i guess, i can copy and use just like my default grunt file? I guess the main question of mine is this: do i have to install each of grunt plugins manually whenever i start a new project?
for example if i have sass task in my gruntfile.js and when i start this new project i have to npm install grunt-contrib-sass --save-dev every single time?
You have at least several options, ordered by complexity ascending:
Create your default projects on disk, and a shell script to automate the bootstrapping.
Use Github, and create a default project that you can bootstrap with GIT on your box.
Use Yeoman scaffolding, and create a custom yeoman generator as a NPM package.
Shell automation can apply to the second and third approach as well.
Yeoman, is def. the cool option, but also takes the most time, and requires more maintenance than the other options.
Related
Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and nmp. If so how it works and why people use grunt, gulp, bower with npm ?
Basically on what i understand (angular-cli is very recent) it hide the webpack .. in reality it use it behind the scene ... i prefer to use the stack made by myself with Webpack and npm .. but now they've just released a new feature the AOT compiler.
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
In reallity it is possible to be done also with webpack .. but you need some changes of your code :
https://github.com/blacksonic/angular2-aot-webpack
Angular-cli is taken (as idea) from Ember-cli .. it help you to manage and create (scaffold) your app....
I think (but it's my idea) I'll continue without it and I'll try to implement new features (as AOT) by myself cause i want to know what happen behind the scene and know everything of my stack.... but it's my personal idea
Hope it help you ..
Can we manage dependencies (js/css), minify, build, serve, watch ... only with node and npm.
the "pm" in "npm" stands for "package-manager" so, of course you can use it as your main package manager.
You can define your own npm scripts in the package.json file and they'll get run when you enter arbitrary command in the console (npm run {script-name}). It can - in some way - replace grunt, gulp and other task-runners.
why people use grunt, gulp, bower with npm ?
Good question, in fact it's like using a framework, when using gulp, grunt, etc, you have a single API, and you can easily find ready-made tools that fit your needs and save your time instead of writing your own script every time.
Using these tools also allow to use a unified API to run all your tasks and avoid you messing with several scripts, and question such as "how should I pass arguments to this script ?" "what is the command to run this ?" etc.
For bower vs npm there is already an answer here
I use node and gulp to compile SASS, minify javascript, copy file, etc. However, since I have 100+ projects on my local development environment (OSX), I'm starting to wonder why I need 300 NPM packages (40MB, 7000 files!) in every single project I start. And that's when I just install gulp and gulp-sass.
Surely there is a better way to use node/gulp/sass. I have tried using GUI tools like compass and Codekit, but I like working with Gulp and I like working from the command line.
Any suggestions?
Check your node/npm version. Newest version of npm flattens by default which results in much fewer modules total. There is also an alternative called pnpm which can reduce module installs quite a bit by linking when existing versions match.
I'm new to css compiling. I currently have a node.js app using express and precompiled bootstrap 3 files, and I'm diving into Stylus to make this better. I want to compile Stylus and import bootstrap with jeet for grid system.
My question is, how should this work? I'm confused about using grunt or why some tutorials show Stylus being used as middleware. Is it that the middleware compiles it realtime, and why would I need that?
Also I ran npm install bootstrap-styl and npm install jeet, but I'm not sure how to reference these in my styles.styl (If I do #import bootstrap, it can't find the files)
My thought is that I want to somehow link the imports to my node_modules, so they can be updated fluidly (I don't want to just copy the bootstrap .styl files from the node_modules folder, right?). Is this what I would use Grunt for?
well grunt is a task runner program that let you write tasks to run and it does automations (if specified) or manual tasks.
Grunt can watch for files/folders changes and invoke some functionality or tasks (if you will) just like what fileWatch function ( in fs module) does in node.js, and the tasks can be anything really from importing jeet into your stylus before compiling to run your tests and refresh your browser. In your situation it's best to use grunt to do the automation (of importing jeet files and compiling it). Grunt is easy to use, you can look at https://www.npmjs.com/package/grunt-contrib-stylus it has the information you will need to use stylus in grunt.
Make sure you npm install grunt-cli && npm install grunt grunt-contrib-stylus --save-dev to install grunt command for command line and the other for your project.
Then in the root of your project you make a gruntfile.js and put your grunt tasks in there, you can google for some articles about it, pretty straightforward.
while using grunt node_modules directory is created for every project I create and their is a lot of duplication going on, which I don't like....
I am using grunt-collections now but it is very inefficient, and looking for an alternative solution for this.
I don't know much about node but is it not possible to use grunt modules from the central node_modules directory within nodejs directory????
Edit:
Is their any way to install packages globally...????
yes, it is necessary. First, to deal with grunt version mismatch issues, all the global grunt command really does is delegate to a local grunt dependency installed in your project's node_modules directory.
Second, you really want a local version of your grunt plugins/modules as well. Having everything installed locally to each project allows you to have two separate projects on the same machine that depend on different versions of the same grunt plugin. This would not be possible if everything was installed globally.
I know when I install a cordova plugin the native files are copied into the platform folder and will be compiled when I build that platform. But is it possible to execute an script to for example download additional binary files, or build custom frameworks?
What I am looking for is a way to specify in plugin.xml to execute a particular shell script or install an npm module when the plugin is first installed into a Cordova project. Is this possible?
That is not possible using the 'cordova plugin add' command (not what they were designed to do) but definitely possible if you use task manager tools like Grunt to automate your process.
You can combine tasks to run in order, such as running your own shell scripts before/after you make a call to install plugins.
Check out npm grunt for more info.
Yes, you can
check this:
https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html
You only have to make a folder, called "after_plugin_add", inside the hooks folder of the project, and add there your script.