I have the following:
angular.module('test')
.controller('TestMenuController',
[
'$http',
'$scope',
'$resource',
'$state',
'os',
'us',
function (
$http,
$scope,
$resource,
$state,
os,
us) {
When I build this in VS2014 it gives me an error message saying:
JSHint (r10): 'angular' is not defined.
Can someone tell me how I can avoid this message coming up?
One way to tackle this is to modify your .jshintrc and set angular as one of the predefined variables, as Jayantha said.
.jshintrc would look like this:
{
"predef": ["angular"]
}
One approach would be adding 'angular' as a global variable in the config options,
or another by setting the config options 'jshintrc' path to .jshintrc
documentation (different ways to configure jshint options)
If you're using grunt..
//------------------------//
// jshint
//------------------------//
/**
* JSHint: configurations
* https://github.com/gruntjs/grunt-contrib-jshint
*/
jshint: {
options: {
jshintrc: '.jshintrc',
jshintignore: '.jshintignore',
reporter: require('jshint-stylish')
},
gruntfile: {
src: 'Gruntfile.js'
},
scripts: {
src: '<%= project.scripts %>/**/*.js'
},
all: [
'Gruntfile.js',
'<%= project.js %>/*.js',
'<%= project.scripts %>/**/*.js',
'test/**/*.js'
]
},
and in .jshintrc (at root dir) contains my following options
{
"curly" : true,
"eqeqeq" : true,
"undef" : true,
"jquery" : true,
// global variables
"globals": {
"angular" : false,
"jasmine" : false,
"$" : false,
"_" : false,
"module" : false,
"require" : false
}
}
Hope this helps.
Related
enter code herenpm test；
var webpackConfig = require('./webpack.test');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
{pattern: './karma-shim.js', watched: false}
],
exclude: [
],
preprocessors: {
'./karma-shim.js': ['webpack']
},
webpack: webpackConfig,
plugins:[
'karma-jasmine',
'karma-chrome-launcher',
require("karma-webpack")
],
proxies:{
"/app/": "http://localhost:3000/src/app"
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
module.exports = {
devtool: 'cheap-module-eval-source-map',
resolve: {
extensions: ['','.ts','.js']
},
module: {
loaders: [
//以.ts结尾的文件使用 TypeScript loader
{test: /.ts$/,loader: 'awesome-typescript-loader'},
{
test:/\.html$/,
loader: 'html'
},
{
test:/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test:/\.css$/,
loader: 'null'
}
]
}
}
then throws a BUG.
karma start karma.conf.js
keywords if/then/else require v5 option
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { : string | [string] } | string | [string]
The entry point(s) of the compilation.
- configuration.resolve.extensions[0] should not be empty.
Can not load "webpack"!
First i don't see any entey point mentioned in config file which is required in order to webpack understand where to start from.
Second your resolve option in config file hase mentioned three types to resolve and first one is empty string which webpack don't like so by removing that empty string it should fix that problem
Hope this help you to fix the issue.
I had the same issue and resolved by updating the karma-webpack package to the latest version.
Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?
VueJs 2x has a very simple example for a component test: Vue Guide Unit testing
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
and then...
// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent', () => {
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
it ...etc
})
and gives an example of a karma conf file here: https://github.com/vuejs-templates
But the Karma configuration file requires a webpack configuration file
webpack: webpackConfig,
The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.
I have tried creating another webpack configuration file based on the example from https://github.com/vuejs-templates/webpack.
Something like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
and included it like...
// Karma configuration
// Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT)
var webpackConf = require('./karma.webpack.config.js');
delete webpackConf.entry;
module.exports = function(config) {
config.set({
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
But I am getting errors that seem to indicate that webpack isn't doing anything.
ERROR in ./resources/assets/js/components/test.vue
Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <span >{{test}}</span>
| </template>
Ok, I got this to work. Couple of things that might help.
I was originally running gulp, and trying to run tests in my vagrant box, to try to match the server configuration. I think that makes it much harder to find examples and answers on the internet.
Ok, so the main problem I was having is that webpack wasn't processing my components included in my test files. I copied the webpack config out of the laravel-elixir-vue-2/index.js node module directly into the Karma configuration file and it started working.
The key is that karma-webpack plugin needs both the resolve and module loader configuration settings (resolve with alias and extensions) for it to work.
Hope this helps someone.
karma.conf.js:
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['Chrome'],
frameworks: ['jasmine'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack']
},
webpack: {
resolve: {
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
vue: {
buble: {
objectAssign: 'Object.assign'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
},
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
I ran into the exact same problem. The accepted answer did not fully work for me. The following solved my issue:
Install relevant loaders for webpack:
npm install --save-dev vue-loader file-loader url-loader
Create webpack config file (note the format). The accepted answer produced errors citing invalid format of the webpack.config.js file. At least with me it did.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' }
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
}
karma.conf.js
// Karma configuration
var webpackConf = require('./webpack.config.js');
delete webpackConf.entry
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
port: 9876, // web server port
colors: true,
logLevel: config.LOG_INFO,
reporters: ['progress'], // dots, progress
autoWatch: true, // enable / disable watching files & then run tests
browsers: ['Chrome'], //'PhantomJS', 'Firefox',
singleRun: true, // if true, Karma captures browsers, runs the tests and exits
concurrency: Infinity, // how many browser should be started simultaneous
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
/**
* base path that will be used to resolve all patterns (eg. files, exclude)
* This should be your JS Folder where all source javascript
* files are located.
*/
basePath: './resources/assets/js/',
/**
* list of files / patterns to load in the browser
* The pattern just says load all files within a
* tests directory including subdirectories
**/
files: [
{pattern: 'tests/*.js', watched: false},
{pattern: 'tests/**/*.js', watched: false}
],
// list of files to exclude
exclude: [
],
/**
* pre-process matching files before serving them to the browser
* Add your App entry point as well as your Tests files which should be
* stored under the tests directory in your basePath also this expects
* you to save your tests with a .spec.js file extension. This assumes we
* are writing in ES6 and would run our file through babel before webpack.
*/
preprocessors: {
'app.js': ['webpack', 'babel'],
'tests/**/*.spec.js': ['babel', 'webpack']
},
})
}
Then run karma start and everything should work.
I want grunt to compile sass every time grunt is executed if my Sass files haven't changed. Sometimes the watcher fails to detect if the compiled result is different from the existing CSS file, and the only way to force it to compile is by editing one of the Sass files.
Grunt file:
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/**/*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: false
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
grunt.registerTask('default', [
'browserSync',
'sass',
'watch',
]);
Simply register sass as a task to run when you type grunt.
If you do this and the sass files are still not giving you the results you want, then you need to revisit your sass task and make sure you're piping the files where you want them to go.
More cool options:
newer: When you run grunt you want sass to compile to CSS only if there is a difference between the new CSS and the old. In that case, try grunt-newer. Appending newer:taskyouwanttorun:option will work.
watch:sass: You want sass to compile during a watch based on something besides changing one of the sass files. Easy, just set up a watch task that looks for whatever file you want to modify, image/javascript/html/whatever and set the task as sass
I am struggling to understand how I can pass a partial filename from the grunt command line, in order to run a task (from an installed grunt module) on a particular file.
What I want to be able to do is configure a series of tasks to take filename parameter from the command line.
I've tried reworking the final example on this page http://chrisawren.com/posts/Advanced-Grunt-tooling but I'm kind of stabbing in the dark a bit. Thought someone would have a quick answer.
Here is my Gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
globalConfig: globalConfig,
uglify: {
js: {
options: {
mangle: true
},
files: {
'js/<%= globalConfig.file %>.min.js': ['js/<%= globalConfig.file %>.js']
}
}
},
});
// Load tasks so we can use them
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('go', 'Runs a task on a specified file', function (fileName){
globalConfig.file = fileName;
grunt.task.run('uglify:js');
});
};
I attempt to run it from the command line like this:
grunt go:app
to target js/app.js
I get this error:
Aborted due to warnings.
roberts-mbp:150212 - Grunt Tasks robthwaites$ grunt go:app
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: globalConfig is not defined
Warning: Task "go:app" not found. Use --force to continue.
Thanks
you can use grunt.option.
your grunt register task will look like this.
> grunt.option('fileName'); grunt.registerTask('go', 'Runs a task on a
> specified file', function (){
> grunt.task.run('uglify:js');
> });
your grunt configuration will be
module.exports = function (grunt) {
var fileName=grunt.option('fileName');
grunt.initConfig({
uglify: {
js: {
options: {
mangle: true
},
files: {
'js/fileName.min.js': ['js/fileName.js']
}
}
},
});
command to run the task from terminal:
$ grunt go --fileName='xyzfile'
I the end I was able to accomplish what I wanted like this, but not sure if this is a standard way.
What I was failing to do was declare the globalConfig variable globally first, so that I could redefine it from the Terminal as I ran my grunt task.
Here is an example. When working with HTML emails I need to:
Process my sass files to css (grunt-contrib-sass)
Run an autoprefixer on the resulting css (grunt-autoprefixer)
Minify my CSS and remove CSS comments (grunt-contrib-cssmin)
Include my full CSS in a tag the of my html file (using grunt-include-replace)
Finally, run premailer on the file to inline all styles (grunt-premailer)
The point is, if I am working on several different HTMl emails in the same project, I need to be able to run all these tasks on html files one-by-one, as needed. The Gruntfile below allows me to do this.
What this does:
If you enter into terminal grunt It will simply run the sass task, which processes all sass files - no file parameter needed from Terminal.
However, if I wish to run a series of processes on a single html file, I enter grunt process:fileName with fileName being the name of the html file without the .html extension.
You will notice that the only tasks that require the fileName are actually include-replace and premailer. However, I still want to run al the other CSS cleanup tasks prior to targetting my chosen file.
The key is:
Declaring the global variable
Load the globalConfig variables into the grunt.initConfig
Use the grunt variable declaration where needed in your tasks
register your custom task, with the fileName variable being used as a paramater.
Hope that helps someone.
module.exports = function (grunt) {
var globalConfig = {
file: 'index' // this is the default value, for a single project.
}
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// load the globalConfig variables
globalConfig: globalConfig,
sass: {
dev: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'css',
ext: '.css'
}]
}
},
cssmin: {
options: {
keepSpecialComments: 0,
keepBreaks: true,
advanced: false
},
target: {
files: [{
expand: true,
cwd: 'css',
src: '*.css',
dest: 'css',
ext: '.css'
}]
}
},
autoprefixer: {
css: {
src: "css/*.css"
}
},
includereplace: {
your_target: {
options: {
prefix: '\\/\\* ',
suffix: ' \\*\\/',
},
files: {
'inline/<%= globalConfig.file %>-inline.html': ['<%= globalConfig.file %>.html']
}
}
},
premailer: {
main: {
options: {
verbose: true,
preserveStyles: true,
},
src: 'inline/<%= globalConfig.file %>-inline.html',
dest: 'inline/<%= globalConfig.file %>-inline.html'
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-premailer');
grunt.registerTask('default', 'sass');
grunt.registerTask('process', 'Runs all processing tasks on a specific file to produce inlined file', function (fileName) {
globalConfig.file = fileName;
grunt.task.run('sass', 'autoprefixer', 'cssmin', 'includereplace', 'premailer');
});
}
EDIT: Obviously at the moment this accepts only one parameter I beleive. In other use cases the grunt.option version above could give more functionality, being able to submit several parameters in one command. I will continue to experiment with grunt.option if I find the need to do this.
I'm using Grunt 0.4.5 with these dependencies in my project:
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-sass": "~0.8.1"
I've just noticed that grunt-autoprefixer didn't get added to my package.json file. Is that because it doesn't have the grunt-contrib prefix? Anyway, Source Maps work for me when I remove autoprefixer from my watch task, but as soon as I add it in again the comment at the very end of the compiled css file gets removed.
This is my autoprefixer config:
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
single_file: {
options: {
// Target-specific options go here.
},
src: 'library/css/style.css',
dest: 'library/css/style.css'
},
sourcemap: {
options: {
map: true
}
},
},
My Sass config looks like this:
sass: {
dist: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: {
'library/css/style.css': 'library/scss/style.scss'
}
}
},
and here's my watch task:
watch: {
options: {
livereload: true,
},
scripts: {
files: ['library/js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
css: {
files: ['library/scss/*.scss'],
tasks: ['sass', 'autoprefixer'],
sourceComments: 'normal',
options: {
spawn: false,
}
},
page: {
files: ['*.php', '*.html']
}
}
I don't get why autoprefixer has to interfere with the source map at all to be honest, I tried using false instead of true, specifying the sourcemap manually as per the example in the grunt-autoprefixer repo, but whatever I do the comment - /*# sourceMappingURL=style.css.map */ gets stripped from the file and source maps don't work in chrome.
EDIT: Sorry, I just got it to work by using:
sourcemap: {
options: {
map: true
},
src: 'library/css/style.css',
dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
},
I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts!
Sorry, I just got it to work by using:
sourcemap: {
options: {
map: true
},
src: 'library/css/style.css',
dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
},
I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts! I'll do some testing and see, as far as I can see it looks like source maps are generated by default now by sass, so I probably only need to specify this in autoprefixer
I found the following worked for me:
sass: {
options: {
sourceMap: true,
sourceMapEmbed: false
},
dist: {
files: {
'css/style.css': 'css/src/style.scss',
'css/debug.css': 'css/src/debug.scss',
}
}
},
autoprefixer: {
//prefix all files
multiple_files: {
expand: true,
flatten: true,
src: 'css/*.css',
dest: 'css/'
},
options: {
map: true,
annotation: false
}
},
Without specifying annotation: false, I found that autoprefixer always overwrote the /*# sourceMappingURL=style.css.map */ with a data-uri sourceMappingURL that would not work (my browser inspectors would not show the original .scss source).
I also found that using sourcemap as in the accepted answer does not work if you have multiple scss/css files. I believe sourcemap allows you to set a different set of options for each scss->css mapping, but I wanted the same settings for all of mine.
Hope this helps!