I would like to use gulp in my Wordpress project. Is it possible to execute gulp functions outside a node JS project?
I'm running on OSx, but couldn't find anything on the internet about it. Or do I'll have to use another lib like Grunt?
Yes, the main language of your project doesn't affect whether or not your can include some node.js dependencies and run them. You will need to have gulp installed and have a gulpfile.js in your project, and then you can run it.
You could install gulp globally on the server (npm install -g gulp), but I recommend creating a package.json file (using npm init) in your project, so that your node.js dependencies are tracked in your version control, and installing gulp with npm install --save gulp (inside your project's directory). Since gulp won't be installed globally in that case, you will need to use "$(npm bin)"/gulp from a directory inside your project to run it.
I use Yeti Launch from the Zurb foundation for the same setup (no node installed on my Mac).
When you run it, it will create a Foundation frame but you can do the following:
Stop the project it creates from within its interface,
Delete the files it creates and replace with yours
Leave the project it shows in the interface
Leave the "node_modules" folder it creates
Start the project again
This will run your Gulp file.
The only issue is installing node modules. For this, I look at any error messages it gives regarding missing modules and copy these into the "node_modules" folder from Github
The short answer is no. Gulp is distributed as a npm package and has node.js as a dependency BUT that doesn't mean you can't use it outside of a node.js project.
The only real need for Gulp on a wordpress project would likely either be at the theming layer or if you were doing a custom plugin. Assuming you are making a theme, some of them use Gulp extensively.
I've used the Roots ecosystem's Sage theme successfully on a number of projects. It has node/npm dependencies but they are all included if you use the theme. Check out their Gulp file - it's probably close to what you are philosophically looking for.
Related
After upgrading Meteor to 1.3.x version NPM really came to play. But as always there is back side of the coin: build size.
On meteor 1.2.x build size is ~50MB, ~7k files
On meteor 1.3.x build size is ~190MB, ~27k files.
Twenty seven thousand files. That's quite a number. Not to mention path size exceeding 256 (a trouble for windows users).
I've dig into what meteor included into the build and it seems that all the npm_modules is here with all the stuff that is need to build some modules and their dependencies.
The question is: how to build meteor app without unnessesary npm files, leaving only the ones that are actually used by app at runtime?
Update:
On meteor 1.4.1_3 if you create a simple project meteor create dummy-project and go through all the common stuff like npm meteor install and meteor npm prune --production and them make a bundle out of it with meteor build c:\dummy --directory you will get a folder with the same 7k files and almost 2k folders (by the way it will not run node main.js out of the box as you might expect). If you tinker through folders you can find babel compiler inside that takes ~3.5k files.
Why do I need babel compiler inside compiled app?
To gain an introspective of your packages,
npm list --depth 0
to see the current packages in your project with only one level.
Inspect that list, and decide if you don't need a package and uninstall it.
You can also use other flags such as
npm list --depth 1 #the number represents the max depth
npm list --long true #for more information about the packages
npm list --global true #to check your global packages.
npm help-search <searchTerm>
Hope that helps you gain more insight in your packages. help-search Link
You may see that multiple packages depends on the same packages, and then it's up to you to decided what your application needs to run successfully.
Edit 1
You can exclude the packages inside your devDependencies, so that when you're publishing/deploying your code you have a cleaner package.
You do this by using npm prune --production - that removes all your devDependencies, and will require your users to do a npm install for your package to work. For info here
I've finally started developing locally and have installed Roots.io for WP builds. Bower, gulp, node, it's all great. I've used Bower to install wow.js and it's there, but the dependency is animate.css. Is there a way to install animate.css via Bower/Homebrew/etc?
On the animate.css Github I don't see a simple way to include it in the Roots build. I've tried to manually include in which hasn't worked either, hence looking for the ideal/clean solution to the problem.
Thank you!
When installing dependancies via bower (or any package manager really) that project should include a manifest (bower.json) that lists it's own dependancies. E.g. The bower.json in wow.js should include a reference to animate.css. However if it does not you can include it as any other dependancy:
bower install animate-css --save
Then run you build process again. In this case:
gulp
I have a Grunt setup on my machine that's running SASS, Compass, Watch, Uglify... that kind of stuff. I've installed it using the command line (npm install...) from a tutorial.
I want to create a Grunt folder for another project. Is it okay to just copy that first folder and change the names? Is there some reason I should install the new one from the command line as well?
it will depends on what context you installed if was local or globally (-g).
If you installed locally without -g option, you are find to copy and past the folders.
However, would be a great practice to reuse only the package.json file and run the command, for your next project:
$ npm install
I am a little confused about the use of Npm, Bower and Grunt. My objective is to install frontend packages (e.g.: bootstrap) for my front-end project and have Grunt set up to automate build tasks.
I have been using Npm in the past and I understand that it works with the package.json file, while Bower works uses the bower.json file. In this case, I installed Grunt with Bower (not Npm), however I realised that in order to run Grunt I still need to add the package.json file.
Should I have been using Bower to install Grunt at the first place ?
Does my project always need the package.json file to use Grunt? And
if so, are there any good practices for dealing with the duplication
between the bower.json and package.json files. (name, version of the app, etc…)
Thanks
grunt (grunt-cli) is command line task runner, not frontend library :), so installing it via bower is strange, but possible due to the fact that bower is using npm as base repository :)
package.json store all tool dependencies in your project - like bower or grunt
In frontend development bower should be handling css/js libraries in your app like jQuery, Angular.js, Bootstrap. NPM is for node.js extensions/utilities like grunt, karma devDependencies.
http://blog.nodejitsu.com/package-dependencies-done-right/
Im trying to start using gruntjs. But the official documentation is confusing me.
Should I write package.json file myself or any command would create it for me?
Uglify, concat, jshint all those plugins they used in the sample gruntfile, are they installed as grunt is installed?
When a plugin is installed, is it installed globally or I should install it everytime I create a new project?
You can write it yourself or create it with npm init or grunt-init.
No, you add the plugins you want to the package.json as devDependencies, then npm install to install them.
Plugins are project specific and are installed locally to your project.