When i try to run grunt , i am getting error as "cannot file the config file .jshintrc". I tried to install the config dependencies but nothing is working out.Can anyone tell me how to resolve this particular error. Do i need to define any particular rule in my grunt.js file as I believe this should be generated automatically in the root folder after running grunt.
The piece of lines for jshint task in grunt.js is-
grunt.initConfig({
lesslint:{
src: ['src/']
},
jshint: { // configure the task
all: ['src/app/**/*.js'],
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'out/jshint-report.html',
//force report
force: false,
// JS Validation rules are configured in .jshintrc file.
jshintrc: '.jshintrc'
}
});
Any help is much appreciated.
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
I am trying to integrate a code coverage reporter to my karma tests.
I set up the following changes in my config:
coverageIstanbulReporter: {
reports: ['html', 'lcovonly', 'text-summary'],
// base output directory. If you include %browser% in the path it will be replaced with the karma browser name
dir: path.join(__dirname, 'coverage'),
// if using webpack and pre-loaders, work around webpack breaking the source path
fixWebpackSourcePaths: true,
},
reporters: config.coverage ? ['kjhtml', 'dots', 'coverage-istanbul'] : ['kjhtml', 'dots'],
But unfortnetly, it does not create a coverage folder.
Here is my full karma.config.js
What am I doing wrong here? Note, that I am calling karma start ./karma.conf.js --coverage and even checked without the config coverage parameter.
Given you have text-summary outputs on Chrome console and you already have the base directory for the reporter specified, you just need to explicitly tell the reporter which sub directory should be used for different report type:
Try to add this entry under coverageIstanbulReporter (from repo's README):
// Most reporters accept additional config options. You can pass these through the `report-config` option
'report-config': {
// all options available at: https://github.com/istanbuljs/istanbul-reports/blob/590e6b0089f67b723a1fdf57bc7ccc080ff189d7/lib/html/index.js#L135-L137
html: {
// outputs the report in ./coverage/html
subdir: 'html'
}
}
I am writing automation test scripts using Protractor and now I need to set up the CI for this using Jenkins.
Tasks it needs to perform are:
Starting the selenium standalon server.
Starting the test using conf.js file.
Stopping the selenium standalone server.
Can anyone help in this regard?
I created a small bash script to do this.
# start selenium
./node_modules/protractor/bin/webdriver-manager start > /dev/null 2>&1 &
# wait until selenium is up
while ! curl http://localhost:4444/wd/hub/status &>/dev/null; do :; done
# run the build
grunt cibuild --force
# stop selenium
curl -s -L http://localhost:4444/selenium-server/driver?cmd=shutDownSeleniumServer > /dev/null 2>&1
This script is invoked from a free-style project in jenkins (Build > Execute shell)
Then the test result report is generated by reading the protractor test results. Hence, you have to produce junit reports from protractor, (look here) :
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmine.JUnitXmlReporter('xmloutput', true, true));
},
To make the report visible in jenkins i add a post build action in the job: Publish JUnit test result report:
Alternatively, you could run this as a Grunt Task. First install grunt on Jenkins. Install the NPM packages for protractor_webdriver and protractor. Setup the configuration file to point the the node_module path and config file paths.
http://sideroad.secret.jp/articles/grunt-on-jenkins/
Then install protractor node modules. The Gruntfile would look similar to this. I created a test directory where the conf and spec files would be located.
module.exports = function (grunt) {
grunt.initConfig({
protractor_webdriver: {
your_target: {
options: {
path: 'node_modules/protractor/bin/',
command: 'webdriver-manager start'
}
}
},
protractor: {
options: {
configFile: "node_modules/protractor/referenceConf.js", // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
args: {
// Arguments passed to the command
}
},
your_target: {
options: {
configFile: "test/conf.js", // Target-specific config file
args: {} // Target-specific arguments
}
}
}
});
grunt.registerTask('p:test', [
'protractor_webdriver',
'protractor'
]);
});
The newest protractor allows you to run the selenium standalone server directly from the conf.js (or whatever protractor entry point you have).
comment out (or delete) the seleniumAddress: 'http://localhost:4444/wd/hub', line, and replace it with seleniumServerJar: './node_modules/protractor/selenium/latest.jar'.
latest.jar isn't installed by default, I created it as a symlink to the latest version installed via npm install protractor --save. This gives longer life to my conf.js files in the same directory.
Within the ./node_modules/protractor/selenium/ folder I ran ln -s selenium-server-standalone-2.48.2.jar latest.jar
You can use Gulp which is far simpler.
After installing gulp in Jenkins System , you may install the npm dependencies(npm install) & run gulp tasks directly as windows batch command in Jenkins as below:
In the background to make selenium server up and running and providing various other parameters , you may use packages like 'gulp-angular-protractor' in the gulpfile.js as below:
gulpfile.js
'use strict';
var gulp = require('gulp'),
gulpProtractorAngular = require('gulp-angular-protractor'),
gulpStart = gulp.Gulp.prototype.start,
currentStartTaskName;
gulp.Gulp.prototype.start = function (task) {
currentStartTaskName = task;
gulpStart.apply(this, arguments);
};
function executeWebTests(suiteName, appName) {
return gulp.src([])
.pipe(gulpProtractorAngular({
'configFile': './conf.js',
'debug': false,
'autoStartStopServer': true,
args: [
'--suite', suiteName,
'--capabilities.browserName', 'chrome',
'--params.APPNAME', appName,
'--params.SUITENAME', currentStartTaskName,
'--capabilities.platformName', 'Windows'],
keepAlive: false
}))
.on('error', function (e) {
console.log('Ended with below ERROR::',e);
process.exit(1);
})
.on('end', function () {
console.log('Test complete');
process.exit();
});
}
gulp.task('RegressionSuiteTask', function () {
executeWebTests('regressionTests,','Application_Name');
});
conf.js
suites: {
regressionTests: ['testCases/**/*.js']//will run all specs in subfolders
},
I know this already resolved and want to target for beginner to create Jenkins job and running test. I suggest to use selenium-server-standalone jar in configuration file and call configuration file from Jenkins.
conf.js
..
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumServerJar: 'node_modules/protractor/node_modules/webdriver-manager/selenium/selenium-server-standalone-3.5.3.jar',
....
//html reporter logic
.....
Creating Jenkins Job
Install node js on Jenkins Server
Install Html Publisher Plugin for end to end testing report
Create Freestyle Project or whatever your needs
Go to Build Section -> Add build step and choose Execute Windows
batch command if Jenkins server in Windows otherwise choose Execute
Shell for Linux
Call conf.js (install packages and call your configuration file)
For reporting Got to Post-Build Actions Section -> Add Publish Html
Reports and call your report file (file assuming from root of your
project)
However you can customize execution command using gulp or similar other packages. Thanks