Migrating from Gruntfile.js to gulpfile.js - node.js

I am trying to use the tool grunt2gulp.js to migrate multiple projects that were set up with grunt into gulp. However, I am unsure how to proceed.
The tool grunt2gulp.js seems to be a simple way to start, but the problem I am having is that I cannot get it to work. As there is no npm install -g grunt2gulp, I am somewhat unsure what I need to do to install the project globally and be able to access it.
The readme.md on the github repo doesn't specify how to install the project.

Download the grunt2gulp.js file to the same directory as your Gruntfile.js file. Navigate to that path using terminal and paste this command:
node grunt2gulp.js Gruntfile.js > gulpfile.js
This will create a gulpfile.js file in the same directory.

Related

npm prepare script not building folder in node modules

I am trying to use npm's prepare script to run a build step when npm installing from a different project.
The script does run during the npm install however, it doesn't build out the dist folder inside node modules.
Refer to this article for more details http://jim-nielsen.com/blog/2018/installing-and-building-an-npm-package-from-github/
I also had the same problem. My prepare script wasn't creating the build directory in the node_modules folder when installing as dependency.
Finally I found out that my .gitignore was the problem, which was setup to ignore the build directory for version control. NPM is inheriting the .gitignore file when no .npmignore can be found, which was the case here.
As stated on https://docs.npmjs.com/misc/developers:
If there’s no .npmignore file, but there is a .gitignore file, then npm will ignore the stuff matched by the .gitignore file
So I solved the problem by simply adding an empty .npmignore in the root.
I hate to provide such a simple answer, but my solution was to use npm install rather than yarn, which apparently doesn't run the prepare script properly.

Launching a Wordpress Project from Github with Gulpfile.js

I have cloned a client's Wordpress repository from Github, however - I am struggling to get it up and running properly.
There is a basic Wordpress setup but the site uses Gulp, by means of a gulpfile.js in the theme directory. This keeps the site minified and builds a 'dist' folder which includes the css and js.
I have all the site files an the theme setup and connected to the database and its all working besides the missing 'dist' folder.
If i dont have node, npm or gulp on my system - do i install them in that order in the theme folder, the root wp folder - or do i not even need to install them? I've tried installing those in the theme folder then running 'gulp' in terminal - but that just tells me i have a bad command.
What do i need to do to execute and run the gulpfile.js is bbasically my question - thank you!
Install Node and NPM Installing npm from the Node.js site
Go where the package.js is and in a terminal run:
npm install
Then you should be able to run
gulp
If this does not work you should look into the gulp file (gulpfile.js) the name of the task and run it accordingly, probably will be something like
gulp build
eg. for a gulp file with this sass task you will run like so:
/**
* Compile Sass.
*/
gulp.task('sass', function() {
return gulp.src('./sass/*.scss') // Create a stream in the directory where our Sass files are located.
.pipe(sass()) // Compile Sass into style.css.
.pipe(gulp.dest('./')); // Write style.css to the project's root directory.
});
gulp sass
if none works post the gulp file or more info so we can help you better, good luck.

File Structure MEAN .IO After mean init MyApp

After setting up node bower grunt and mean I run mean init myApp which prepares me a new project. At that point I go into the app and run
npm install
After my project is installed I can run the app with no problems and everything looks great. But the amount of files and folders is a bit overwhelming. I have searched for a tutorial explaining the file paths but can't find one that matches my current build after following those commands right off of the mean.io website.
$ sudo npm install -g mean-cli
$ mean init yourNewApp
Someone please provide me with some documentation to read through to understand what's being installed following those commands and how to weed through it to understand how to start working with mean.io
The file structure is int he picture below.
Config is for env-based and global configuration.
Gulp is the gulp scripts for running \ updating \ minifying
Logs contain the application's logs
node_modules contain npm dependencies (standard)
Packages contain core and custom packages
Tests contain the test configuration files
Tools contain general scripts like npm's postinstall actions (for example, propagating bower install to all packages)
The documentation describes the folder structure for packages (which is almost the only interesting folder in terms of functionality development):
Also, John Webb has a couple of useful mean.io video tutorials which might help you find your way around mean.io:
Getting Started
Customization

Gulp installs outside project root

I've encountered a weird issue when installing Gulp in a new project.
Let's say I have the following path:
c:/development/myproject
When I run npm install gulp in that directory, the node_modules folder actually gets created in
c:/development/node_modules
instead of
c:/development/myproject/node_modules
And all of gulp plugins also get installed in that directory outside my project root.
I also have an earlier project where gulp was already installed before, and when I tried to rerun gulp installation in that project directory it was installed correctly in the project root (for example: c:/development/myolderproject/node_modules), not outside.
I don't think it has anything to do with the case, but the new project is using Laravel 4, while the other one is on Laravel 5.
I don't recall having to set any specific configuration before, so I'm totally confused why it behaves differently.
When you did npm install it found package.json from parent directory and thought it was the package root.
Related docs: https://www.npmjs.org/doc/files/npm-folders.html#more-information
Starting at the $PWD, npm will walk up the folder tree checking for a folder that contains either a package.json file, or a node_modules folder. If such a thing is found, then that is treated as the effective "current directory" for the purpose of running npm commands. (This behavior is inspired by and similar to git's .git-folder seeking logic when running git commands in a working dir.)
If no package root is found, then the current folder is used.
I run Ubuntu 15 and I had a similar issue where gulp was installing the node_module folder somewhere I couldn't find. gulp would say ../../node_modules was the location but it was NOT in my project folder.
I figured out from the link above and some more research I just needed to run npm init to create a project.json in my project folder. gulp was installing the node_modules in another folder because it searches for a project.json file to install the folder node_modules into.
Hope this helps anyone else solve this silly problem.

Bower, Grunt on Ubuntu 12.04 - command not found

I've installed bower and grunt on my machine but non of it works. I get :command not found for both.
I've placed paths to bower and grunt in .bash_profile file, like:
export PATH="/home/user/.node/lib/node_modules/grunt-cli/bin:$PATH"
export PATH="/home/user/.node/lib/node_modules/bower/bin:$PATH"
It feels like packages are installed correctly but it can't be found.
Npm and node is located in home/user/.node and home/user/.npm directories is this is the right place for it?
which bower/grunt outputs nothing
Just had to remind myself of this one, to set up environment on a new machine.
As per http://gruntjs.com/getting-started, there are two steps required for installation and use of Grunt.js task runner on a given project:
You should globally install only 'grunt-cli', the Grunt Command Line Interface. This will put the grunt command on your system path. This is achieved by running npm install -g grunt-cli, which may require root privileges depending on your setup.
You should locally install the grunt task runner proper. This is achieved by running npm install, after adding the desired version of Grunt.js to your project's package.json file. This will install the specific version of Grunt.js described in your project's package.json, under the devDependencies section. This is the file used by nodejs to describe project development and deployment dependencies, among other stuff.
I managed to fix it by adding paths to .bashrc file, like:
PATH=$PATH:/home/user/.node/lib/node_modules/grunt-cli/bin
PATH=$PATH:/home/user/.node/lib/node_modules/bower
Reference

Resources