I was developing a simple node application and I came across this tool called grunt-cli.
After intro to grunt I planned to use it with my application.
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
execute: {
target:{
src: ['app.js']
}
},
watch: {
scrpits: {
files: ['app.js'],
tasks: ['execute'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-execute');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['execute', 'watch']);
};
package.json
{
"name": "exampleapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Priyank Thakkar",
"license": "ISC",
"dependencies": {
"express": "^4.14.0",
"grunt": "^0.4.1"
},
"devDependencies": {
"grunt-contrib-watch": "^1.0.0",
"grunt-execute": "^0.2.2"
}
}
app.js
var express = require('express');
var app = express();
app.set('port', process.env.port || 3005);
app.listen(3005, function(){
console.log('application started at http://localhost:' + app.get('port'));
});
Is it correct to run execute followed by watch? Somehow I feel terminal is stuck at execute task only, it is not watching the changes in app.
Your grunt execute target is blocking watch and never ends. These two tasks need to run in separate threads.
You could use something like grunt-concurrent to execute both these tasks simultaneously:
https://github.com/sindresorhus/grunt-concurrent
Related
I build a webpack to my project which using firebase 9 to collect page data from documents which is working like a charm in my index.html page. My problem is when i try to add another html page for admin panel it doesn't work my problem is if i am right i need to change my webpack.config.js but don't know how. my webpack.config.js is
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
watch: true
}
my goal is add another page which is adminpanel.html and use it same as index.html everything controls from index.js in index.html and with watch: true i can see everything in real time please help me
my package.json is
{
"name": "firebase-9",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"firebase": "^9.6.4"
}
}
my project structure is
--dist
-adminpanel.html
-index.html
-bundle.js
--node_modules
--src
-index.js
package-lock.json
package.json
webpack.config.js
I am trying to add automatic browser refresh to the dev environment for my preact ssr build.
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:client": "webpack -w",
"start:server": "babel-node server.js",
"dev": "yarn run start:client & yarn run start:server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"express": "^4.17.1",
"preact": "^10.5.2",
"preact-render-to-string": "^5.1.10",
"preact-router": "^3.2.1"
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "dist"),
filename: "app.js"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
mode: 'development'
};
server.js
const express = require('express');
const path = require('path');
const render = require('preact-render-to-string');
const { h } = require('preact');
const { App } = require('./src/App');
const app = express();
const HTMLShell = (html) => `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>preact ssr</title>
</head>
<body>
<div id="app">${html}</div>
<script src="./app.js"></script>
</body>
</html>
`;
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
const html = render(<App />);
res.send(HTMLShell(html));
});
app.listen(3001);
When I run yarn dev, the webpack is correctly watching for any changes and rebuilding. I have to manually refresh the browser to see the effects, is there a way to automate this?
It doesn't look like you have webpack-dev-server as part of this project, which is responsible for handling the live reloading of your browser as changes occur. Start by adding that to your project:
yarn add webpack-dev-server --dev
Then, replace the current scripts in your package.json with the following:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:client": "webpack-dev-server",
"start:server": "babel-node server.js",
"dev": "yarn run start:client & yarn run start:server"
},
Running yarn dev should give you live reload with recompiling after making that change.
Protractor tests were running well till I messed around with my config.js file to include screenshot testing.
Errors from running protractor conf.js
C:\Users\hhhhhh\mmmm\tests\e2e>protractor conf.js
[10:50:13] E/configParser - error code: 105
[10:50:13] E/configParser - description: failed loading configuration file conf.js
C:\Users\hhhhhh\AppData\Roaming\npm\node_modules\protractor\built\configParser.js:130
throw new exitCodes_1.ConfigError(logger, 'failed loading configuration file ' + filename);`
package.json
{
"name": "e2e",
"version": "1.0.0",
"description": "yup yup yup",
"main": "conf.js",
"dependencies": {
"protractor-jasmine2-screenshot-reporter": "^0.3.1",
"protractor": "3.3.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
conf.js
var ScreenShotReporter = require('protractor-screenshot-reporter');
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
framework: 'jasmine2',
specs: ['specs/*spec.js'],
onPrepare: function() {
jasmine.getEnv().addReporter(new ScreenShotReporter({
baseDirectory: 'target/screenshots'
}));
}
};
Many seem to be having issues with this. Anyone found a sound solution?
It looks from your package.json that you are using protractor-jasmine2-screenshot-reporter but you are using protractor-screenshot-reporter in your conf.js. Both are different modules, please use one of those and try again!
setting up a new project that will have multiple grunt tasks that I want to load from task files.
when running my first task, 'core' which is supposed to build the core css for the site, I'm getting an error that I can't seem to resolve. been doing some googling and not finding this specific issue. any issues with the same error message usually were the result of a typo or misplaced curly braces on the part of the OP. Not sure that's the case here, but perhaps someone else sees what I'm obviously not seeing.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
};
grunt-tasks/grunt-core.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.config('core', {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
}
});
grunt.registerTask('core', ['sass:dist']);
};
error:
$ grunt core
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.dist" missing. Use --force to continue.
Aborted due to warnings.
I've tried a few different things. If I change the registerTask to this:
grunt.registerTask('core', ['sass']);
I get this error:
$ grunt core
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
not sure if this is relevant, but here is package.json and some specs on the system I'm using.
Mac OSX Yosemite
node version v5.10.1
npm 3.8.3
package.json
{
"name": "TEST",
"version": "1.0.0",
"description": "test test test",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/path/to/repo"
},
"author": "me <me#example.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/path/to/repo/issues"
},
"homepage": "https://github.com/path/to/repo",
"devDependencies": {
"angular": "^1.5.5",
"bootstrap-sass": "^3.3.6",
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^1.1.0",
"jquery": "^2.2.3",
"sass-lint": "^1.5.1"
},
"dependencies": {
"jquery": "^2.2.3"
}
}
Looks like it was user error on my part.
in the task file, I had grunt.config(), but I should have had grunt.initConfig()
var taskConfig = {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
},
concat : {
core : {
src : ['node_modules/jquery/dist/jquery.js', 'js/main.js'],
dest : "../dev/js/main.js"
}
}
};
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig(taskConfig);
grunt.registerTask('core', ['concat:core','sass']);
};
I am trying to set up some simple Grunt tasks but upon running them I get a Warning in the terminal "Warning: Task "default" not found.
I have simplified the gruntfile down to just one task, to reduce the chance this was caused by syntax errors but I am still getting the same warning...
gruntfile.js
exports.module = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: {
'/public/scripts/test.min,js' : ['/public/scripts/test.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
package.json
{
"name": "CustomersCRUD",
"version": "0.0.1",
"description": "Customer CRUD Application",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dan Hutchinson",
"license": "ISC",
"dependencies": {
"express": "^4.6.1",
"serve-favicon": "^2.0.1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.0"
}
}
warning given
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Many thanks!
Okay, didn't catch this before but it's module.exports not exports.module
That should fix it. Also, I don't believe your file references need a / before them.
I see a comma here: '/public/scripts/test.min,js'
Could that be your issue?