multiple Gruntfilejs files - gruntjs

I'm new to bower and grunt and I just started my first project with the below bower dependancies:
bower.json
{
"name": "test",
"version": "0.0.0",
"authors": [
""
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap-rtl": "~0.9.1",
"jquery-ui-bootstrap": "~0.2.5",
"jquery-ui": "~1.10.3",
"jquery": "~2.0.3"
},
"exportsOverride": {
"*": {
"js": "**/*.js",
"css": "**/*.css"
}
}
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
bower: {
install: {
options: {
targetDir: './lib',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
//--end
});
// Load plugins here
grunt.loadNpmTasks('grunt-bower-task');
// Define your tasks here
grunt.registerTask('default', ['bower']);
};
I noticed that bower_components/bootstrap-rtl/ contains another Gruntfile.js.
Is there away to call bower_components/bootstrap-rtl/Gruntfile.js from my Gruntfile.js before the bower:install?

You can use --gruntfile to determine the location of the Gruntfile.
Check out the CLI source code for more info.
Example use:
grunt jshint --gruntfile bower_components/bootstrap-rtl/Gruntfile.js
You could also use grunt-grunt, which I just wrote for this kind of scenario.
You configure it like this:
grunt.initConfig({
grunt: {
boots: {
gruntfile: 'bower_components/bootstrap-rtl/Gruntfile.js',
tasks: ['some', 'tasks']
}
}
});
Then you could just set up an alias, such as below:
grunt.registerTask('build', ['grunt:boots', 'compile']);
Hope it works for you.

Related

grunt webpack Cannot find module 'webpack-dev-server'

I have a grunt setup to bundle my react files using webpack and grunt-webpack. I am not using webpack-dev-server but still my grunt is outputting error as Cannot find module 'webpack-dev-server'
Here is my grunt file:
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks("grunt-webpack");
grunt.initConfig({
eslint: {
options: {
configFile: 'eslint.json'
},
target: ['./react/components/**/*.js','./react/services/**/*.js', './node/source/**/*.js']
},
webpack: {
options: webpackConfig,
build:{}
},
watch: {
app: {
files: ['./react/main.js', './react/components/**/*.js','./react/services/**/*.js'],
tasks: ["webpack"],
options: {
spawn: false,
}
}
}
});
grunt.registerTask('lint', ['eslint']);
grunt.registerTask('build', ['webpack']);
grunt.registerTask('default', ['watch']);
};
webpack.config.js file
const path = require('path');
const buildDirectory = './node/static/js/';
module.exports = {
entry: './react/main.js',
resolve: {
extensions: ['', '.js', '.jsx'],
},
output: {
path: path.resolve(buildDirectory),
filename: 'bundle.js',
},
externals: {
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
stats: {
assets: false,
colors: false,
modules: false,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015'],
},
}],
},
plugins: [],
};
Error output
grunt build
Loading "webpack-dev-server.js" tasks...ERROR
>> Error: Cannot find module 'webpack-dev-server'
Loading "webpack-dev-server.js" tasks...ERROR
>> Error: Cannot find module 'webpack-dev-server'
Running "webpack:build" (webpack) task
Done.
This error gets resolved if I add webpack-dev-server package, but I don't want extra dependency in my project.
Packages:
"webpack": "^1.13.1",
"grunt-webpack": "^1.0.14",
"grunt": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-eslint": "^19.0.0",
You will have to add it as dependency. Why you don't need it anyway; it seems necessary to in order to run the project in development. That's way NPM allows you to have development dependencies as well. All of the ones that you listed are dev dependencies.
See below:
"devDependencies": {
// ... more dev dependencies
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
// ... more 'normal' dependencies
"bootstrap": "^3.3.6"
}

gruntfile is giving me errors in terminal

learning grunt.js and I keep getting this error in Terminal.
Running "sass:dist" (sass) task
Warning: Path must be a string. Received undefined Use --force to continue.
Aborted due to warnings.
Here's the code. Any help would be great
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/** Sass task **/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'compiled/style.css': 'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'compiled/style-min.css': 'sass/style-min.scss'
}
}
},
/** Watch task **/
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
}
and here my json
{
"name": "millervolpe2016",
"version": "1.0.0",
"description": "Our company's new theme",
"main": "index.php",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jspraguemillervolpe/miller-volpe.git"
},
"keywords": [
"miller",
"volpe"
],
"author": "Jason Sprague",
"license": "ISC",
"bugs": {
"url": "https://github.com/jspraguemillervolpe/miller-volpe/issues"
},
"homepage": "https://github.com/jspraguemillervolpe/miller-volpe#readme",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-autoprefixer": "^3.0.4",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0"
},
"dependencies": {}
}
your sass dist: and files: should be like that:
files: {
'compiled/style-min.css': 'sass/style.scss'
}
The file you are pointing is sass/style.scss so you should use the same for dist and dev.
this file: 'sass/style-min.scss' does not exist in your project and in your dev sass you are using: 'sass/style.scss' , I did a test here and now sass:dist works fine if you change this.
let me know if that fix your problem.
thanks.

grunt browserify react requiring jquery

Using latest node and Grunt 0.4.x, react 0.10.x
What to via Grunt execute browserify on React JSX files that have requires on jquery in them:
var $ = require('jquery');
Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:
"browser": {
"jquery": "./bower_components/jquery/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
}
Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:
browserify: {
options: {
debug: true
},
src: ['src/views/**/*.js'],
dest: 'build/javascript/client.js'
},
Running Grunt gives the following error:
Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"
If and when I get this working then I assume "reactify" can be added to the transform array in the package.json.
I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:
browserify: {
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
Without the "dist" browserify wouldn't run properly.
This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).
So at the end of the package.json there is:
"browser": {
"jquery": "./lib/jquery/jquery.js",
"bootstrap": "./lib/bootstrap/bootstrap.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
}
and in the Gruntfile.js:
browserify: {
options: {
debug: true,
transform: ['browserify-shim', require('grunt-react').browserify]
},
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
This both shims and processes the JSX. Finally.

Gruntfile.js watch

So I'm making my own Wordpress Framework, and am utilizing grunt and sass. I'm newer at grunt and sass, but experienced enough with grunt to kind of know what I'm doing, but I've used LESS in the past and not Sass.
I'm taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I'm not too sure about a couple of things. I removed the js stuff because I'm not going to be watching for it, and I added grunt-contrib-sass.
When running grunt watch I get this error:
grunt watch
/Gruntfile.js:22
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
Below is my Gruntfile.js and my package.json
Gruntfile.JS
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
version: {
options: {
file: 'lib/scripts.php',
css: 'assets/css/main.min.css',
cssHandle: 'su_styles'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': [
'assets/scss/app.scss'
]
}
}
},
watch: {
sass: {
files: [
'assets/scss/*.scss',
'assets/scss/foundation/*.scss'
],
tasks: ['sass', 'version']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.min.css',
'templates/*.php',
'*.php'
]
}
},
clean: {
dist: [
'assets/css/main.min.css'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wp-version');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks
grunt.registerTask('default', [
'clean',
'version',
'sass'
]);
grunt.registerTask('dev', [
'watch'
]);
};
package.json - with some stuff taken out to preserve a bit of privacy
{
"name": "sudoh",
"version": "1.0.0",
"author": "Brandon Shutter <brandon#brandonshutter.com>",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-wp-version": "~0.1.0",
"grunt-contrib-sass": "~0.5.0"
}
}
Thanks for your help ahead of time.
It seems there wasn't anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.
Thanks for the help everyone.

Grunt twice for the same task

I would like to run the jshint task twice in GruntJS, but with different options each time.
How would I go about doing something like that?
Currently, my Gruntfile.js looks like this:
'use strict';
module.exports = function(grunt) {
var opts = {
pkg: grunt.file.readJSON('package.json'),
jasmine_node: {
matchall: true,
forceExit: true
},
jshint: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/bin', '!src/static/js/libs/*.js',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
};
grunt.initConfig(opts);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jshint', 'jasmine_node']);
grunt.registerTask('travis', ['jshint', 'jasmine_node']);
};
And I would probably want it to be something like this:
var jshint: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/**',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
var jshint2 = {
files: [
'src/static/**/*.js',
'!src/static/bin',
'!src/static/js/libs/*.js'
],
options: {
jshintrc: '.jshintrc-browser'
}
};
So that I can pick different options for the front-end javascript and the NodeJS javascript, since linting should be different for each of those environments
jshint is a multitask. So it is possible to have to following config:
jshint: {
browser: {
files: [
'src/static/**/*.js',
'!src/static/bin',
'!src/static/js/libs/*.js'
],
options: {
jshintrc: '.jshintrc-browser'
}
},
node: {
files: [
'gruntfile.js',
'src/**/*.js', '!src/static/**',
'test/spec/**/*.js'
],
options: {
jshintrc: '.jshintrc'
}
}
}
To run the browser version:
grunt jshint:browser.
To run to node version:
grunt jshint:node.
Running just:
grunt jshint
will run both.
Of course, you probably will want to trigger them via another task, e.g:
grunt.registerTask('build', ['clean:all', 'jshint:browser', ...]);
You want want to read the section Specifying JSHint options and globals for more info.

Resources