I would like to use a custom reporter for jshint in a grunt setting. At the moment I don't have time to become a node.js/grunt expert, so I had hoped to find a sample grunt file that includes a definition of a reporter and how to supply it to jshint.
Extensive searching has given me only a few sample gruntfile.js, none of which change the reporter for jshint. I looked at the summaries all of the stack overflow posts that mention "gruntfile.js".
Thanks
You need this:
options: {
reporter: 'jslint'
}
Here is mine Gruntfile.js (raw):
/* jshint strict: true, devel: true */
require('./config.js');
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'config.js', 'src/**/*.js'],
options: {
reporter: 'jslint'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('foo', function() {
requirejs('resources').copy();
});
grunt.registerTask('default', ['jshint', 'foo']);
};
Related
I want to put inside gulpfile something like:
require('web-component-tester').gulp.init(gulp);
gulp.task('default', function() {
gulp.watch(['elements/**', 'test/**'], ['test:local']);
});
The purpose is to watch test folders or elements folders (with Polymer components). If some of them will change, run test with each build.
my wct.conf.js:
module.exports = {
root: '.tmp/elements/',
suites: ['**/test/'],
plugins: {
local: {browsers: ['chrome']},
}
};
I found the code above on some page but after I add some tests and then type gulp in my terminal I found error, because .tmp folder is not updated and strange errors like Polymer is not definedor ajax.generateRequest is not a function. I got also right errors when I intentionally made a mistake in a test to fail it, so it looks like something is ok, but not at all.
I add the tests to the existing project with lots of files. When I tried to do the same thing on empty project I also got the same error until I type bower install.
Is there any chance that this is the problem with bower dependencies?
Or have you any idea what is wrong? Is this part of code in gulpfile right to perform the desired effect?
Thanks a lot.
I am not answering your question directly, because its been a while since I've done it that way. But the following defines a sub task from among others to define a task called 'client' which then runs the tests in a frame buffer (so I don't have disturbing windows popping up all over the place when the tests run - they just run and output in a console window. Its effectively spawning a command line version of wct and I don't have a wct.conf file at all.
(function() {
'use strict';
const spawn = require('child_process').spawn;
module.exports = function(gulp) {
gulp.task('test:client',['lint:client'], () => {
var child = spawn('xvfb-run', ['-a', 'wct', '--color'], {cwd: process.cwd()});
child.stdout.setEncoding('utf8');
child.stdout.on('data', function(data) {
process.stdout.write(data);
});
child.stderr.setEncoding('utf8');
child.stderr.on('data', function(data) {
process.stderr.write(data);
});
});
gulp.task('client',function() {
gulp.watch([
'app/index.html',
'app/src/*.html',
'app/test/*.html',
'aoo/mocks/*.html',
'gulpfile.js',
'tasks/*.js'
],['test:client']);
});
};
})();
This file is one file within the tasks directory (which as you can see I am watching)
My gulpfile loads this, and other tasks like so (I copied this from the angular.js team who used it to load some of there tasks supporting angular)
(function() {
'use strict';
require('dotenv').config(); //load our environment
var gulp = require('gulp');
var includeAll = require('include-all');
/**
* Loads task modules from a relative path.
*/
function loadTasks(relPath) {
return includeAll({
dirname: require('path').resolve(__dirname, relPath),
filter: /(.+)\.js$/
}) || {};
}
// *
// * Invokes the function from a Gulp configuration module with
// * a single argument - the `gulp` object.
function addTasks(tasks) {
for (var taskName in tasks) {
if (tasks.hasOwnProperty(taskName)) {
tasks[taskName](gulp);
}
}
}
/**
* Add all Gulp tasks to the gulpfile.
* Tasks are in `tasks/`
*/
addTasks(loadTasks('tasks/'));
// require('gulp-load-tasks')(__dirname + '/tasks');
gulp.task('default', ['lint:gulp','client','server']);
})();
I've written a very simple little Angular2 app that I've built to generate exercise sheets. However it seems that when I deploy the app ngIf doesn't work (either my ISP default webserver or my own Heroku/local deployed node-http-server). When I run the exact same code base on my dev node server (npm start) ngIf works as expected.
If anyone has some guidance on how I can debug this I would be extremely grateful, or if I'm just plain doing something wrong...
Here's the relevant code
src/template.html
Click on the top left word <span *ngIf="word">({{word}})</span><span *ngIf="!word">(<click>)</span>
app.ts
import {bootstrap} from 'angular2/platform/browser'
import {enableProdMode, Component} from 'angular2/core'
enableProdMode()
#Component({
selector: 'app',
templateUrl: 'src/template.html'
})
export class AppComponent {
public word = '';
}
bootstrap(AppComponent)
When the app starts locally I see "Click on the top left word (<click>)" (as seen in this plunker link), however when I deploy the app I just see "Click on the top left word". I have previously found similar issues with ngFor in deployment. I do however see the following code in both dev and deploy
<!--template bindings={}-->
<!--template bindings={}-->
so the template is being processed, at least to some extent. My best guess is that something must be going wrong when I generate the bundle.js or dependencies.js files through gulp. I don't see any Javascript errors on the dev or deploy site via Chrome dev console though.
Here are some of the relevant tasks from my gulpfile.
gulp.task('webpack', ['clean'], function() {
return gulp.src('src/app/app.ts')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('src/'));
});
gulp.task('dependencies', function() {
return gulp.src(['node_modules/reflect-metadata/Reflect.js',
'node_modules/zone.js/dist/zone.js'])
.pipe(concat('dependencies.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
I'm using Angular2.0.0-beta.7. My gulp deployment pipeline also uses Webpack1.12.2 with the following config:
webpack.config.js
module.exports = {
entry: './src/app/app',
output: {
path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [{
test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
}]
}
};
Thanks to #EricMartinez's debug suggestion the app now works. The problem lies with the mangling of the uglified javascript code. (I'll try and trace back what actually goes wrong during the processing of the concatenated JavaScript file.) For now turning the mangling off in uglify() does the trick, but of course I don't have obscuration of the code anymore (which isn't an issue for my particular implementation). Here's the fix:
gulpfile.js
gulp.task('js', ['webpack'], function() {
return gulp.src('src/bundle.js')
.pipe(uglify({ mangle: false })) // <- added mangle option set to false
.pipe(gulp.dest('dist/'));
});
The original code looked like this
gulp.task('js', ['webpack'], function() {
return gulp.src('src/bundle.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
See this issue on github for more.
While playing around with Babel and Webpack I stumbled into some really weird behavior today.
I threw a debugger in my main.js to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not defined. I try console logging the same module instead, and I see it printed to my console.
What gives? I've pasted the relevant code snippets below:
main.js
import Thing from './Thing.js';
debugger // if you type Thing into the console, it is not defined
console.log(new Thing()); // if you let the script finish running, this works
thing.js
class Thing {
}
export default Thing;
webpack.config.js
var path = require('path');
module.exports = {
entry: './js/main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: path.join(__dirname, 'js'), loader: 'babel-loader' }
]
}
};
tl;dr: Babel does not necessarily preserve variables names.
If we look at the code generated from
import Thing from './Thing.js';
debugger;
console.log(new Thing());
namely:
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _ThingJs = require('./Thing.js');
var _ThingJs2 = _interopRequireDefault(_ThingJs);
debugger;
console.log(new _ThingJs2['default']());
We see that Things is not defined indeed. So Chrome is correct.
In some debugging scenarios, it may be sufficient to assign the imported variable to a new variable in local scope. For example:
import Thing from './Thing.js';
const TestThing = Thing;
debugger; // although Thing will not be defined, TestThing will be defined
console.log(new TestThing());
This doesn't fix the core issue at hand, but it can be a workaround for debugging in certain situations.
You can try my webpack plugin which defines debug vars for imports so that they are available in the debugger.
https://github.com/trias/debug-import-vars-webpack-plugin
I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.
dose any one know how I can configure my grunt file for haml?
I have this now:
haml: {
dist: {
files: {
'index.html': 'index.haml'
}
}
}
I've also tried `
haml: {
dist: {
files: {
['index.html']: 'index.haml'
}
}
}
both along with
grunt.loadNpmTasks('grunt-contrib-haml');
I've been able to get compass running but not haml. I tried the config.rb file as well.
I'd imagine you did, but are you registering the task at the end of your Gruntfile.js file? Also, what error messages (if any) are you getting when you run 'grunt haml -v' from the command line?
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
haml: {
dist: {
files: {
'index.html':'index.haml'
}
}
});
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.registerTask('default','['haml']);
^^^^ this last bit here, is it in your Gruntfile? You should have something similar for Compass to run.
This package always gives me some grief when I install it, for whatever reason.