I would like to set the path of the node_modules directory within the gruntfile.js. I would like to have one central node_module directory for all my grunt projects.
Is it possible to set the path for an external node_module directory?
Current setup (which works)
projekt1
--gruntfile.js
--package.json
--node_modules
projekt2
--gruntfile.js
--package.json
--node_modules
Set up which I would like to have
node_modules
project1
--gruntfile.js
--package.json
project2
--gruntfile.js
--package.json
You can.... I have been using this setup without any issues. In each of your project Gruntfile.js files, simply set the base to one directory up like so:
Given a folder structure like this:
node_modules
project1
app.js
Gruntfile.js
package.json
Your Gruntfile.js may look something like this
module.exports = function(grunt) {
// Tell grunt where to find node_modules
// This is the line you're looking for
grunt.file.setBase('../');
// Your normal grunt config
grunt.initConfig({
// Your package.json file is now relative to the parent folder
pkg: grunt.file.readJSON('project1/package.json'),
// I use webpack, your tasks will probably be different
webpack: {
options: {},
build: {
// Paths are now resolved from the upper folder
// since we set the base path to one level up
entry: './project1/app.js',
output: {
// Again, the path must be relative to the parent folder
path: 'project1',
filename: 'app.min.js'
}
}
}
// etc...
});
// Load tasks...
}
Once you setBase('../') you'll need to make sure that all your file paths are resolved correctly since your base path has been changed to 1 level up.
A warning... if you publish or distribute your package, Grunt tasks won't work for those who download it because they more than likely won't have the same setup with node_modules 1 level up. And even if they do, they may not name the project1 folder the same
Related
I have a gulp script that watches for code changes in all javascript files. It looks like this:
gulp.watch(['./**/*.jsx', './**/*.js'], ['build:react']);
So, it watches for all .js and .jsx files from root directory, but I want to ignore node_modules directory.
How can I do that ?
You ca use gulp unwatch This removes the folder specified from your pipe. However, it's generally a good idea to have a source folder that gulp watches instead of the project root folder (then the .git directory and all sorts will be caught up in your task.
I'm trying to use grunt-contrib-compass for an AngularJS project with multiple app folders. Here is my basic directory structure:
/root
/appA
/appB
...
/appX
/public
/modules
/moduleName
/css
/sass
gruntfile.js is stored in /root
My compass task is set up as follows:
compass: {
dev: {
options: {
cssDir: 'app*/public/modules/**/css',
sassDir: 'app*/public/modules/**/sass',
outputStyle: 'compressed'
}
}
}
Note the wildcard selectors (*) in "cssDir" and "sassDir".
When this task runs, it successfully finds the .scss files in the directory specified for "sass". However, upon creating the .css files, it creates a new folder structure in /root like so:
/root
/app*
/public
/modules
/**
/css
The "css" folder is left empty and the actual .css file is saved in the same directory as my .scss files.
As an example, this is the terminal output for one of the .scss files when the compass task is run:
>> File "appStudentHousing/public/modules/studentHousingHome/sass/styles.scss" changed.
Running "compass:dev" (compass) task
directory appStudentHousing/public/modules/studentHousingHome/sass
write appStudentHousing/public/modules/studentHousingHome/sass/styles.css (0.003s)
It appears that the task recognizes wildcard selectors in the "sassDir" option, but it does not recognize them in the "cssDir" option. It creates a blank folder structure with the asterisks in the actual folder name, and then for some reason it saves the output .css file in the same folder as the .scss file.
Thanks much for any insight you can provide.
My comments converted into an answer:
Currently, the compass grunt plugin can only process single directories per target, thus no globbing that would match with multiple directories.
To circumvent this limitation, you always have the ability to create mutiple targets inside your compass task (Grunt functionality). A target is a subdivision of a task and can be used to setup different execution scenarios.
Two different targets for the compass plugin could look something similar to this:
compass: {
dev: {
options: {
cssDir: 'app/dev/modules/css',
sassDir: 'app/dev/modules/sass',
outputStyle: 'compressed'
}
},
live: {
options: {
cssDir: 'app/live/modules/css',
sassDir: 'app/live/modules/sass',
outputStyle: 'compressed'
}
}
}
This would give you two targets, dev and live, which specify different options. To execute each target individually, you simply call them on your command-line as follows:
$ grunt compass:dev
$ grunt compass:live
The naming of a target is totally up to you, there are no strict conventions to follow. If you have a single target for your task, then running the task like so:
$ grunt compass
Executes the single target. You do not need to explicitly specify it. However, if you have multiple targets in your task, then Grunt shall execute all of them in order when running with the above command.
And, as you have seen yourself, the official Grunt documentation gives you more detailed info regarding tasks and targets.
Is it possible to map a whole directory the node_modules directory for example to src/lib/ in the require config?
Sample Project:
project/
project/node_modules
project/src/
project/src/lib/
In RequireJS you actually can configure paths that points to a folder. And, you can name your path whatever you want. For example, if you have a folder named node_modules and you have some libs in there including jquery, you can configure a path like
require.config({
paths: {
'lib' : '/path_to_node_module_folder'
}
});
and later in your module you can require jquery like
define(['lib/jquery'], function($){
....
});
I am having issues setting up r.js when using require in my angular application. I am new to using AMD so it may be an easy fix. Unforunately the directory structure must remain as is because of the requirement of ability to add more clients using the same Default components.
The error I get is that it can't find the controller dependencies. It is triyng to reference them from Client#1/Directory_For_Prod_Packs/Angular/Default/_Controllers/.js. So essentially it is adding the whole absolute path at the end of where the build file is at, or at least that what it seems like to me. Any help would be amazing. Essentially I'd just like to either have one pack of all my directives, services, controllers, etc. Or packs of controllers.js then directives.js and so forth.
Here is my directory structure.
Angular
Lib
angular.js
Default
Controllers
_Controllers.js //pack of controllers
.js //all the separate Controllers
Directives
_Directives.js
.js
Client#1
main.js //require config
app.js
build.js // r.js build config
And this is my build.js for r.js
({
baseUrl: '../../lib/Angular',
dir: "../../Client#1/ProductionBuild",
paths: {
"controllers": '../../Default/_Controllers/_Controllers',
},
modules: [
{
name: "controllers"
}
]
})
And finally this is my _Controller.js which
define(['angular',
'../../Default/_Controllers/controller1.js',
'../../Default/_Controllers/controller2.js'],
function(angular) {
'use strict';
var dependencies = ['controller1',
'controller2',];
angular.module('app.controllers', dependencies);
}
);
I'm not sure what exactly is the problem (the directory structure and the ../.. seem not to match, though I may be mistaken), but try setting the build.js properties as:
baseUrl: The folder that contains the scripts, relative to the HTML page that loads them, not relative to build.js
dir: Build output folder, relative to build.js
appDir: Application folder. It probably contains an index.html that bootstraps the scripts of your application. The folder pointed to by the baseUrl configuration property must be under this! And this is relative to build.js.
Take extra care about baseUrl, those ../.. look suspicious. It is relative to the index.html, not build.js.
Is there any configuration file or something we can change in yeoman that would set the "app" directory to something else? I work with Zend Framework 2 and it uses the "public" directory as the root yeoman uses "app".
I see that I can directory name in the Grunt.js file but it would be nice to reset the defaults in yeoman.
You want to change the Gruntfile.js settings, as from version 1.0 everything is listed here, and build is done by Grunt only.
As they write on the website:
Yo scaffolds out a new application, writing your Grunt configuration
and pulling in relevant Grunt tasks that you might need for your
build.
Bower is used for dependency management, so that you no longer
have to manually download and manage your scripts.
Grunt is used to
build, preview and test your project, thanks to help from tasks
curated by the Yeoman team and grunt-contrib.
I can't remember where the old settings was in the gruntfile, but in version 1.0 is at line 11 and looks like this:
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
With version 1.4.7 :
1) For app directory :
Gruntfile.js :
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'www'
};
index.html :
<!-- build:js({.tmp,app}) scripts/scripts.js -->
bower.json :
"appPath": "app"
test/karma.conf.js
'app/scripts/**/*.js'
2) for the dist directory :
Only in Gruntfile.js
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'www'
};
for Angular generator version 0.9.5 works for me:
change folder name from to app to anything you need, for example 'clientapp'
edit gruntfile.js, change in appConfig app: 'clientapp'
edit bower.json change line "appPath": "clientapp"
in renamed folder find index.html, then find and edit part in comment
build:js({.tmp,clientapp}) scripts/scripts.js
in folder test find karma.conf.js and change app to 'clientapp' in files section
Update to 1.0 and edit your Gruntfile.js
// configurable paths
var yeomanConfig = {
**app: 'app',**
dist: 'dist'
};
Sorry for resurrecting this, however I have found a few locations which this needs to change and feel that I can add some value:
I use Laravel, which uses an app and public folder, and have never used zend, but am assuming that something similar should apply.
install Yeoman generated app into yeoman:
/[zendapproot]/
mkdir yeoman && cd yeoman
yo angular [appName]
/[zendapproot]/yeoman/
append contents of `/[zendapproot]/yeoman/.gitignore` into `/[zendapproot]/.gitignore`
move everything except the app directory into /[zendapproot]/
edit .bowerrc
{
"directory": "yeoman/app/bower_components"
}
edit Gruntfile.js to change app and dist folders
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'yeoman',
dist: 'public/assets'
},
edit karma.conf.js
files: [
'yeoman/app/bower_components/angular/angular.js',
'yeoman/app/bower_components/angular-mocks/angular-mocks.js',
'yeoman/app/bower_components/angular-resource/angular-resource.js',
'yeoman/app/bower_components/angular-cookies/angular-cookies.js',
'yeoman/app/bower_components/angular-sanitize/angular-sanitize.js',
'yeoman/app/bower_components/angular-route/angular-route.js',
'yeoman/app/scripts/*.js',
'yeoman/app/scripts/**/*.js',
'yeoman/app/test/mock/**/*.js',
'yeoman/app/test/spec/**/*.js'
],
run grunt test to ensure that testing is working.
run grunt serve to serve the webapp in a testing env
run grunt to build which should store the app in public/assets
Now this is the part I am not sure on...
At present, I remove htmlmin and rev from grunt.registerTask('build'... in Gruntfile.js to stop html minification and to stop assets being renamed.
I then open up my master view template from Laravel (Zend in your case), and change the scripts and styles to that provided in the grunt built index.html /public/assets/index.html
If anybody has a better way of tackling the above, please share. e.g. in relation to passing the renamed asset filenames to the zend/laravel application view templates.
When creating a new project (for angular at least), there is a cmd line arg for this: --appPath=[newPath]:
yo angular --appPath=public
How to change the dist folder name:
Additionally, for anyone that ends up here looking for how to change the dist folder name (as I did):
There is no cmd line arg that I could find, so you need to manually edit Gruntfile.js at line 21 after creating your project, but before running grunt:
// Configurable paths for the application
var appConfig = {
app: require('./bower.json').appPath || 'app',
//dist: 'dist'
dist: 'public'
};