grunt-contrib-connect running but not working - gruntjs

I am using : https://github.com/gruntjs/grunt-contrib-connect
"grunt-contrib-connect": "^1.0.2",
After run: grunt connect
Running "connect:server" (connect) task
Started connect web server on http://localhost:8000
Done.
So when I check in my browser: localhost:8000 , does not open anything.
can someone help on this?
gruntfile pastenbin : http://pastebin.com/nL771d5j
Gruntfile.js
module.exports = function (grunt) {
var config = {};
//setup the configuration object
var jshint;
//all tasks that must be loaded.
var tasks = [
,'grunt-contrib-watch'
,'grunt-contrib-concat'
,'grunt-contrib-sass'
,'grunt-contrib-connect'
];
//src ===============================
var src;
config.src = src = {
sassMain : 'scss/main.scss',
distFolder : 'public/stylesheets/dist.css',
devFolder : 'public/stylesheets/dev.css',
sassFolder : 'scss/**/*.scss',
serverPort: 9000,
serverHost: '0.0.0.0'
};
//Concat ===============================
var concat
config.concat = concat = {};
concat.dev = {
files: {
"public/myapp.development.js": [
"with-bootstrap/public/js/vendor"
,"with-bootstrap/public/js/**/*.js"
]
}
};
//Watch ===============================
config.watch = {
scripts: {
files: ["<%= src.sassFolder %>"]
,tasks: ["sass:dist"]
}
}
//Sass ===============================
var sass;
config.sass = sass = {};
//distribution
sass.dist = {
options: {
style: "compressed",
noCache: true,
sourcemap: 'none',
update:true
}
, files: {
"<%= src.distFolder %>" : "<%= src.sassMain %>"
}
};
//development env.
sass.dev = {
options: {
style: "expanded",
lineNumber: true,
}
, files: {
"<%= src.devFolder %>" : "<%= src.sassMain %>"
}
};
//grunt serve ===============================
config.connect = {
server: {
options: {
port: 8000,
base: {
path: 'SITE',
options: {
index: 'index.html',
maxAge: 300000
}
}
}
}
};
//Register custom tasks ===============================
grunt.registerTask('default',['dev']);
grunt.registerTask('dev', ['concat:dev','sass:dev']);
grunt.registerTask('dist',['concat:dev','sass:dist']);
//General setup ===============================
grunt.initConfig(config);
tasks.forEach(grunt.loadNpmTasks);
};

If you're running the grunt-contrib-connect plugin by itself, you'll need the property keepalive set to true in your grunt config:
config.connect = {
server: {
options: {
port: 8000,
keepAlive: true,
base: {
path: 'SITE',
options: {
index: 'index.html',
maxAge: 300000
}
}
}
}
};
Worth Noting if you want to use your connect config as part of a chain of tasks, keepAlive will need to be set to false, otherwise tasks after connect task won't run. You can also keep connect running by pairing it with the watch task w/o using the keepAlive option.

Related

Gruntfile fails with Warning: Task "default" not found

this is my gruntfile.
i run $ grunt default
actuall i want to up my index.html on some port and want it to open in chrom directly
module.exports = function(grunt) {
grunt.initConfig({
connect: {
server: {
options: {
port: 9001,
base: {
path: 'Dev',
options: {
index: 'index.html',
maxAge: 300000
}
}
}
}
},
open: {
delayed: {
path: 'http://localhost:9001'
app: 'Google Chrome'
options: {
openOn: 'serverListening'
}
}
}
});
grunt.registerTask('default', ['connect', 'open']);
};
You need to load the task:
grunt.loadNpmTasks('grunt-contrib-connect');

CSS version numbers with Grunt

I am using Grunt with php and am using a package to version my css with a date stamp as style.min.20160913230349.css.
However how do I find a package that will update the new string to the header in my php page. style.min.{grunt_this_string}.css.
I'm looking a usemin but can't see how I could implement it.
<link rel="stylesheet" media="all" href="/css/style.min.20160913230349.css" type="text/css"/>
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
/*=============================================
= Proxy server =
=============================================*/
php: {
dist: {
options: {
hostname: 'sau.dev',
base: 'website-v2', // Project root
keepalive: false,
open: false
}
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'website-v2/*.php',
'website-v2/*/*.php',
'website-v2/css/*.css'
]
},
options: {
proxy: 'sau.dev',//<%= php.dist.options.hostname %>:<%= php.dist.options.port %>
ghostMode: {
clicks: false,
forms: false,
scroll: true
},
logLevel: 'info',//client
logConnections: true,
watchTask: true,
open: 'ui',
xip: true,
}
}
},
watch: {
html: {
files: ['src/*.html'],
}
},
cssmin: {
dist: {
files: {
'website-v2/css/style.min.css': ['website-v2/css/all.css']
}
}
},
uglify: {
dist: {
files: {
'website-v2/js/main.min.js': ['website-v2/js/jquery- 1.9.1.min.js','jquery-ui.min.js','main.js','featherlight.js']
}
}
},
assets_versioning: {
options: {
tag: 'date',
dateFormat: 'YYYYMMDDHH',
timezoneOffset: 10
},
dist: {
options: {
tasks: ['cssmin:dist']
}
},
},
});
//grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-assets-versioning');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-string-replace');
//grunt.loadNpmTasks('usemin');
//Static Server
grunt.registerTask('dist', ['versioning']);
//Proxy Server
grunt.registerTask('server', ['php:dist','browserSync','watch']);
};
After understand your problem, I think that you need to create a assets.map
You need to add this in gruntfile.js.
options: {
...
versionsMapFile: 'assets.json',
...
}
I would like to believe that grunt-assets-versioning create a version taken the date.
You need to replace in your html with the version that provide assest.json.
I recommend to use grunt-string-replace for this.
replace: {
dist: {
options: {
patterns: [
{
match: 'style.min.css',
replacement: replacement()
}
]
},
files: [
{src: ['src/assets/index.html'], dest: 'build/index.html'}
]
}
}
...
grunt.registerTask('versioning', ['assets_versioning']);
grunt.registerTask('replace', ['string-replace']
...
function replacements() {
var projectFile = "assets.json";
if (!grunt.file.exists(projectFile)) {
grunt.log.error("file " + projectFile + " not found");
return true;//return false to abort the execution
}
var project = grunt.file.readJSON(projectFile);//get file as json object
var version = project[0].version;
var replace = ''
// continue with the algorithm that you need
return replace;
}
I hope that helps.

How to create standalone bundle of React & React with Addons using Grunt + Browserify?

I am trying to configure Grunt & Browserify to output a standalone bundle containing, among other things, React as CommonJS module so that it can be referenced by other bundles.
The problem that I am having now is that the aliasing does not seem to work. Despite having specified aliases in my external bundle vendor below, and having specified that those modules should be loaded externally in all the other models, I'm still getting an error at run time, stating that the 'react' module cannot be found.
It would be great if anyone knows what might be wrong about my grunt-browserify syntax here:
var externals = [
'react',
'react/addons',
'jquery',
'backbone',
'react-router'
];
module.exports = function(grunt) {
grunt.config.set('browserify', {
main: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
signup: {
src: 'assets/js/signup.jsx',
dest: '.tmp/public/js/signup.js',
options: {
debug: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
login: {
src: 'assets/js/login.jsx',
dest: '.tmp/public/js/login.js',
options: {
debug: true,
insertGlobals: true,
extensions: ['.jsx'],
external: externals,
transform: [
['babelify', {'stage': 0}]
]
}
},
vendor: {
src: [
'./node_modules/react/dist/react.js',
'./node_modules/react/dist/react-with-addons.js',
'./node_modules/jquery/dist/jquery.js',
'./node_modules/backbone/backbone.js',
],
dest: '.tmp/public/js/dependencies/vendor.js',
options: {
debug: false,
alias: {
'react:': './node_modules/react/dist/react.js',
'react/addons': './node_modules/react/dist/react-with-addons.js',
'jquery': './node_modules/jquery/dist/jquery.js',
'backbone': './node_modules/backbone/backbone.js',
'react-router': './node_modules/react-router/lib/index.js'
},
shim: {
react_router: {
path: './node_modules/react-router/lib/index.js',
exports: 'react-router'
}
},
external: null
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
I've found this link helpful for me. Following this approach your vendor section should look like
vendor: {
src: ['.'],
dest: '.tmp/public/js/dependencies/vendor.js',
options: {
debug: false,
alias: externals.map(function(module) {
return module + ':';
}),
shim: {
react_router: {
path: './node_modules/react-router/lib/index.js',
exports: 'react-router'
}
},
external: null
}
}
I'm not sure about the shim section above, because I've tried this only for the react module.
I am working on a Sails 0.11.0 project with ReactJS. I start my grunt watchify task to handle rebundling/transforming my app code, while using the vendor task to bundle the moduled code. I additionally had to add the vendor.js to my layout file.
I am fairly new to the grunt world, so there may be more efficient ways to do this.
browserify.js
var externals = [
'react',
'react/addons',
'jquery',
'react-router',
'events'
]
module.exports = function(grunt){
grunt.config.set('browserify', {
dist: {
options: {
external: externals,
transform: [
['babelify', {
loose: 'all'
}]
]
},
files: {
".tmp/public/js/bundle.js": ["assets/js/bundle.js", "react/**/*"]
}
},
vendor: {
src: [
'./node_modules/react/dist/react.js',
'./node_modules/react/dist/react-with-addons.js',
'./node_modules/jquery/dist/jquery.js',
'./node_modules/react-router/lib/index.js',
'./node_modules/events/events.js'
],
dest: '.tmp/public/js/dependencies/vendor.js',
options: {
alias: {
'react': './node_modules/react/dist/react.js',
'react/addons': './node_modules/react/dist/react-with-addons.js',
'jquery': './node_modules/jquery/dist/jquery.js',
'react-router': './node_modules/react-router/lib/index.js',
'events': './node_modules/events/events.js'
}
}
}
});
grunt.loadNpmTasks('grunt-browserify');
}
tasks/config:
module.exports = function(grunt) {
grunt.config.set('watch', {
api: {
// API files to watch:
files: ['api/**/*', '!**/node_modules/**']
},
assets: {
// Assets to watch:
files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],
// When assets are changed:
tasks: ['syncAssets' , 'linkAssets', 'browserify:dist']
},
react: {
files: ['react/**/*'],
tasks: ['browserify:dist']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};
Here is the full Grunt configuration for the React:
https://github.com/koshkarov/reactjs-grunt-configuration
I've created a dummy project so you can build it to test.
Gruntfile.js for the project:
module.exports = function (grunt) {
let concat = {};
let clean = {};
let uglify = {};
let copy = {};
let htmlmin = {};
let cssmin = {};
let browserify = {};
let watch = {};
let template = {};
let run = {};
/* React configuration. */
const reactSourcePath = './source';
const reactCompiledPath = './client';
const reactHtmlPathDest = './client/index.html'
const reactTargetName = "react";
const reactFileName = "react_main";
/* ### TASK CONFIGURATIONS ### */
/* Clean compiled files. */
clean[reactTargetName] = [
`${reactCompiledPath}`
];
/* Concatenate all CSS files to one. */
const cssConcatSourceTemplate = `${reactSourcePath}/**/**.css`;
const cssDestinationFile = `${reactCompiledPath}/css/${reactFileName}.css`;
concat[reactTargetName] = {
src: [cssConcatSourceTemplate],
dest: cssDestinationFile
};
/* Convert JSX to JS, prepare JS files for a browser and copy to the destination. */
const jsSourceFile = `${reactSourcePath}/index.js`;
const jsDestinationFile = `${reactCompiledPath}/js/${reactFileName}.js`;
browserify[reactTargetName] = {
options: {
transform: [['babelify', {presets: ['es2015', 'react']}]]
},
files: {
[jsDestinationFile]: jsSourceFile
}
};
/* Replace js/css placeholders and copy html file to destination. */
const applicationData = {
css: [
'./css/react_main.css'
],
js: [
'./js/react_main.js'
]
};
var jsFiles = "";
var cssFiles = "";
applicationData.css.forEach(function(item) {
cssFiles = cssFiles + `\n<link rel="stylesheet" type="text/css" href=${item}>`;
});
applicationData.js.forEach(function(item) {
jsFiles = jsFiles + `\n<script type="text/javascript" src=${item}></script>`;
});
template[reactTargetName] = {
options: {
data: {
appName: '<%= pkg.name %>' + '-react',
productVersion: '<%= pkg.version %>',
reactEmbeddedCssFiles: cssFiles,
reactEmbeddedJsFiles: jsFiles
}
},
files: {
[`${reactHtmlPathDest}`]: `${reactSourcePath}/index.template.html`,
}
};
/* Uglify react JS file. */
uglify[reactTargetName] = {
files: {
[jsDestinationFile]: jsDestinationFile
}
};
/* Copy bootstrap CSS/JS files. */
copy[reactTargetName] = {
files: {
[`${reactCompiledPath}/css/bootstrap.min.css`]: 'node_modules/bootstrap/dist/css/bootstrap.min.css',
[`${reactCompiledPath}/js/bootstrap.min.js`]: 'node_modules/bootstrap/dist/js/bootstrap.min.js',
[`${reactCompiledPath}/js/jquery.min.js`]: 'node_modules/jquery/dist/jquery.min.js',
}
}
/* Minify HTML files. */
htmlmin[reactTargetName] = {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
[`${reactHtmlPathDest}`]: `${reactHtmlPathDest}`
}
};
/* Minify react CSS file. */
cssmin[reactTargetName] = {
files: {
[cssDestinationFile]: cssDestinationFile
}
};
/* Watch for any changes in react app.
There are three separate watches for css, js, and html files. */
watch[reactTargetName + '_css'] = {
files: [`${reactSourcePath}/**/*.css`],
tasks: [`concat:${reactTargetName}`],
options: {
livereload: true
}
};
watch[reactTargetName + '_js'] = {
files: [`${reactSourcePath}/**/*.js`],
tasks: [`browserify:${reactTargetName}`],
options: {
livereload: true
}
};
watch[reactTargetName + '_hmtl'] = {
files: [`${reactSourcePath}/**/*.html`],
tasks: [`template:${reactTargetName}`],
options: {
livereload: true
}
};
/* Jest tests */
jestTestsTaskName = reactTargetName + '_jest_tests';
run[jestTestsTaskName] = {
exec: 'npm test'
};
/* Generate task names for react. */
var reactTasks = {
debug: [
"clean",
"browserify",
"concat",
"copy",
"template"
].map(x => x + `:${reactTargetName}`),
release: [
"clean",
"browserify",
"concat",
"copy",
"template",
"htmlmin",
"uglify",
"cssmin"
].map(x => x + `:${reactTargetName}`)
};
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch:watch,
copy:copy,
concat:concat,
clean:clean,
uglify:uglify,
template:template,
browserify: browserify,
htmlmin: htmlmin,
cssmin: cssmin,
run:run
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-template');
grunt.loadNpmTasks("grunt-browserify");
grunt.loadNpmTasks("grunt-contrib-htmlmin");
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('react_build_debug', reactTasks.debug);
grunt.registerTask('react_build_release', reactTasks.release);
}

GRUNT + LESS + BROWSERSYNC running on XAMPP

I have a little big problem with BrowserSync version for Grunt.
PROBLEM:
If I edit .php files - BrowserSync work good but if I edited .less files, nothing happened but in bash I can still see:
[BS] File changed: d:\localhost\htdocs\www\wordpress\wp-content\themes\MYPROJECTNAME\css\main.css
Can somebody please help me to setup correctly:
GRUNT + LESS + BrowserSync running on XAMPP (because of WordPress)?
My gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
// Watch task config
watch: {
less: {
files: ['less/**/*.less'],
tasks: ['less']
}
},
// less task config
less: {
dev: {
files: {
"/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/css/main.css" // destination
:
"less/main.less" // source file
}
}
},
// Using the BrowserSync Proxy for your existing website url.
browserSync : {
dev : {
bsFiles : {
src : [
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.php',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/images/*.*',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/_dev/less/**/*.less',
'/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.css',
]
},
options : {
watchTask: true,
debugInfoě: true,
logConnections: true,
notify: true,
proxy: "localhost/www/wordpress",
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// register a default task.
grunt.registerTask('default', ['less', 'browserSync', 'watch']);
};
Thanks all! :-)
Here is my setting
var root = 'localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/';
browserSync : {
dev : {
options : {
files: [root+'style.css',
root+'js/**/*.js',
root+'**/*.php'],
watchTask: true,
debugInfoe: true,
logConnections: true,
notify: true,
proxy: "localhost/www/wordpress",
}
}
}
});

Restart node and run tests

Does anyone know the best solution for automatically restarting node and running tests after the restart every time a file changes?
I am currently using grunt-contrib-watch with grunt-develop. I am getting an ECONNREFUSED error on the some restarts. I think it is because my tests are running before the server is fully online.
Any ideas on how best to achieve what I want?
What I want: Restart node and then run all integration tests after each file change.
I am taking a BDD approach to testing (as opposed to regular unit tests) with cucumber.js. I wanted to make sure that each test run against the API I was building started on a fresh boot-up of the application.
I figured it out. Here is what I used:
grunt-contrib-watch to monitor for file changes.
It in turn calls
grunt-develop to restart the application
grunt-cucumberjs to run the cucumber tests
I then modified my index.js (starts the app) so that it doesn't start the app if the NODE_ENV is set to test. That way the cucumber tests actually start the server and can wait till the start process has finished before running the tests.
Here is the GruntFile and Index file:
Gruntfile.js
/*jslint node: true */
"use strict";
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
env: {
dev: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'dev',
PORT: 8080
},
test: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'test',
PORT: 8081
},
coverage: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'test',
PORT: 8081
}
},
watch: {
js: {
files: [
'index.js',
'features/**/*.js',
'server/**/*.js'
],
tasks: ['develop', 'cucumberjs', 'jshint'],
options: {
nospawn: true
}
}
},
jshint: {
all: ['Gruntfile.js', 'index.js', 'server/**/*.js', 'features/**/*.js']
},
nodemon: {
dev: {
script: 'index.js'
}
},
cucumberjs: {
src: './features',
},
develop: {
server: {
file: 'index.js'
}
},
instrument: {
files: ['index.js', 'server/**/*.*'],
options: {
lazy: true,
basePath: 'coverage/instrument/'
}
},
storeCoverage: {
options: {
dir: 'coverage'
}
},
makeReport: {
src: 'coverage/coverage.json',
options: {
type: 'lcov',
dir: 'coverage/reports',
print: 'detail'
}
},
coverage: {
options: {
thresholds: {
'statements': 90,
'branches': 90,
'lines': 90,
'functions': 90
},
dir: 'coverage',
root: ''
}
}
});
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-develop');
grunt.loadNpmTasks('grunt-cucumber');
grunt.loadNpmTasks('grunt-istanbul');
grunt.loadNpmTasks('grunt-istanbul-coverage');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['env:dev', 'nodemon']);
grunt.registerTask('test', ['env:test', 'watch']);
grunt.registerTask('testcoverage', ['env:test', 'jshint', 'instrument', 'cucumberjs', 'storeCoverage', 'makeReport', 'coverage']);
};
Index.js
/*jslint node: true */
"use strict";
var Hapi = require('hapi');
var Good = require('good');
var server = {};
exports.server = {
start: function(callback) {
/* istanbul ignore next */
var port = process.env.PORT || 8080;
server = new Hapi.Server(port);
var routes = require('./server/routes');
routes.register(server);
var exceptionHandling = require('./server/exceptionHandling');
exceptionHandling.register(server);
server.pack.register(Good, function(err) {
/* istanbul ignore if */
if (err) {
throw err; // something bad happened loading the plugin
}
/* istanbul ignore next */
server.log('info', 'Server starting at ' + server.info.uri);
server.start(callback);
});
},
stop: function(callback) {
server.log('info', 'Server stopping.');
server.stop(null, callback);
},
rootUrl: function() { return server.info.uri; }
};
/* istanbul ignore if */
if (process.env.NODE_ENV != 'test') {
exports.server.start(function() {});
}

Resources