Develop Reference

How to make Webpack use project's "node_modules" in js scripts located outside the project folder?

I have Node.js project and the following structure of folders:
lib
awesome-formatter.js
FrontEndApp
prettify.js
node_modules
awesome-parser
BackEndApp
...
I use awesome-parser module and awesome-formatter.js library in prettify.js script like this:
require('awesome-parser')
require('../lib/awesome-formatter.js')
awesome-formatter.js, in turns, should use awesome-parser too:
require('awesome-parser')
My FrontEndApp has been configured to use Webpack, and I'm trying to run it in dev mode using npm run dev command. However, I got the following error:
ERROR Failed to compile with 1 errors
These dependencies were not found:
* awesome-parser in /home/user/dev/lib/awesome-formatter.js
I don't want to move awesome-formatter.js inside the FrontEndApp because I also use it in BackEndApp project (and probably in some other projects) and I don't want to create separate "node_modules" in "lib" for it just not to duplicate installed modules on disk.
So, my question is, how to make Webpack use project's "node_modules" in js scripts located outside the project folder?
P.S. Of course there are workarounds like symlinks or making a full-featured module (with package.json etc.) from lib/awesome-fromatter and installing it into FrontEndApp/node_modules, but is there a direct way to solve this problem?

I've found a solution: resolve.modules sould be added to Webpack configuration file.
module.exports = {
...
resolve: {
...
modules: [
'node_modules',
resolve('node_modules')
]
},
...
}
This means that Webpack is searching modules in 'node_modules' as a relative subfolder (and it's the usual behavior), and at the absolute path to the project's 'node_modules' as well: resolve('node_modules'), so that scripts in folders outside the project (like lib in my structure) can find and use it.

Can't run my grunt task using grunt-bower-task plugin

I've the same configuration like this thread in my gruntfile.
bower: {
install: {
options: {
targetDir: './lib',
install: true,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
But wen I run my grunt task it throw the following error:
Running "bower:install" (bower) task
Fatal error: No bower.json present
That's a little weird because I've my bower.json file inside of the defined directory(lib). Also if I run inside of it throw the same error
Any suggestion?

did you tried running bower install from command prompt? How did you generated your project scaffold? Bower.json , package.json and gruntfile.js should be in your root directory.
Here is the best way to generate project scaffold and running the application using grunt and bower.
http://yeoman.io/codelab/setup.html
I hope this will help you.

bower.json needs to be in the same directory as your package.json/gruntfile etc. not in the target directory.

How Do You Make Changes To A WordPress Theme That Uses Grunt For JS Files?

I am trying to makes changes to a JS file in a WordPress theme I am using. The theme uses Grunt to package all the CSS and JS files. I have never used Grunt before so I'm wondering how I can update some of the JS files.
Is there a simple way to do this?
From my research online it seems I need to install a package to my server — is this correct? Any directions or help is much appreciated. I've pasted below the Grunt.js file that the theme uses.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
files: {
'js/vendor-min.js': [
'js/jquery.mixitup.js',
'js/jquery.stapel.js',
'js/owl.carousel.js',
'js/jquery.magnific-popup.js',
'js/modals.js',
'js/auth.js',
'js/jquery.mousewheel.js',
'js/jquery.mCustomScrollbar.js',
'js/placeholder.js',
'extensions/mail_subscription/js/mail_subscription.js',
'js/plugins.js',
'js/theme.js'
],
'js/widgets/min/jflickrfeed.min.js': [
'js/widgets/jquery.jflickrfeed.js'
]
}
}
},
watch: {
scripts: {
files: [
'js/*.js',
'extensions/mail_subscription/js/*.js'
],
tasks: ['uglify']
},
styles: {
files: [
'**/*.scss'
],
tasks: ['compass']
}
},
jshint: {
files: [
'js/theme.js'
],
options: {
globals: {
jQuery: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['watch']);
};

I would suggest you need to install the dependencies of the project first, then you can use the Grunt task to compile assets. You will need NodeJS and Grunt-cli (npm install -g grunt-cli) installed.
cd into the theme directory
Run npm install (this will install all the dependencies of the theme)
Run grunt watch (this will start grunt watching the files for changes)
Edit JS/CSS files whilst the grunt watch task is running, and when you save you should see the JS/CSS recompiled
If you don't wish to have grunt watch running all the time, you can manually run the grunt uglify, grunt jshint and grunt compass tasks individually.

Images not found when deploying Sails JS to Heroku

I have developed a Sails.js application which is working as expected locally. However, when I deploy it to production (Heroku) the images in the "/assets/images/"-folder cannot be found (404).
I know there are some tasks that transfer the files in the "/assets"-folder to a ".tmp/public"-folder to be accessible when the application is being lifted. The .js- and .less-files are being loaded as expected, but not the images.
How can I make sure that the "/assets/images"-folder is being transferred to the public-folder as well?

I had this issue.
The main idea is to make an uploads folder in .tmp.
And make a symbolic link in public folder leading to uploads.
The problem is that Grunt rewrite all the content of '.tmp/public' every time we lift application.
Thus I made a proper Grunt task which simply creates symlink.
sudo npm install grunt-contrib-symlink
Create Grunt task in tasks/config. And name it smth like symlink.js.
module.exports = function(grunt) {
grunt.config.set('symlink', {
dev: {
src: '.tmp/uploads/**',
dest: '.tmp/public/uploads/'
}
});
grunt.loadNpmTasks('grunt-contrib-symlink');
};
And finally add task to tasks/register/compileAssets.js.
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'symlink:dev'
]);
};

Loading grunt tasks from a remote Gruntfile.js

In the root directory of a project, I'm trying to load Grunt tasks, and all the content of the file as well, from a remote Gruntfile.js, accessible through a network (web or internal network).
I've already tried several things (see below), first hosting the Gruntfile.js on a local Apache server for the tests.
Using the --gruntfile option
> /project/path> grunt --gruntfile=http://localhost/Gruntfile.js build
Reading "Gruntfile.js" Gruntfile...ERROR
Fatal error: Unable to find "/project/path/http://localhost/Gruntfile.js" Gruntfile.
Using the --base option
> /project/path> grunt --base=http://localhost/Gruntfile.js build
process.chdir(grunt.option('base') || path.dirname(gruntfile));
Error: ENOENT, no such file or directory
Creating a Gruntfile.js located at the root directory of my project, which contains only the following code :
module.exports = function (grunt) {
grunt.loadTasks( 'http://localhost/Gruntfile.js' );
};
The result was :
> /project/path> grunt build
>> Tasks directory "http://localhost/Gruntfile.js" not found.
Warning: Task "build" not found. Use --force to continue.
Aborted due to warnings.
Another try with the Gruntfile.js
module.exports = function (grunt) {
require( 'http://localhost/Gruntfile.js' )( grunt );
};
Gave me this :
> /project/path> grunt build
Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'http://localhost/Gruntfile.js'
Warning: Task "build" not found. Use --force to continue.
Aborted due to warnings.
Edit: It seems there is no way of loading tasks from a grunt file not located on the disk. I will find another solution.

I ran into the same problem and this is my solution. I hope it helps someone in the present/future:
Create a npm package to host the Gruntfile.js and upload it to a repository (I´am currently using Bitbucket) This is how my package.json looks like:
{
"name": "my-remote-gruntfile-package",
"private": true,
"version": "0.0.1"
}
Configure it in the package.json of your current project and install it using npm install or just run
npm install git+ssh://git#bitbucket.org:user/my-remote-gruntfile-package.git#0.0.1
Create a bash script (or windows bash equivalent) to cover the problem of changing Gruntfile.js location and setting current base path. This is to avoid passing --gruntfile and --base parameters on every execution (this step is not mandatory)
#!/bin/bash
grunt --base ./ --gruntfile ./node_modules/my-remote-gruntfile-package/GruntFile.js $1
Note: take care of relative paths used on your Gruntfile.js

Requiring a separate file should work, note that you shouldn't refer to it via localhost, but rather the location on disk, for example ./somedir/yourtask.js. Here's an example:
yourtask.js:
module.exports = {
// your task config goes here
};
Your Gruntfile.js:
module.exports = function(grunt) {
var externalFile = require('./somedir/yourtask.js');
grunt.initConfig({
// some random tasks go here
yourtask: externalFile
});
};
This should work but I'm not able to run it right now and you haven't posted what kind of info you have defined in your separate file. You can also have a function in there as well.