How would I have grunt bump, bump the version of multiple files in various folders? When I provide the grunt task more than two files, it only bumps the version for two of the three, and disregards the third.
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
bump: {
options: {
files: ["package.json", "./client/package.json", "./server/package.json"],
commit: false,
createTag: false,
push: false,
globalReplace: false,
prereleaseName: false,
regExp: false
}
}
})
grunt.loadNpmTasks("grunt-bump")
grunt.registerTask('default', ['bump'])
}
Related
This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either
You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile
I am using webpack to bundle my express server, and would like to utilize the webpack watcher. I am using nodemon to restart my server when the bundle changes.
I can manually run webpack with the watcher in one terminal and start nodemon in a second, but I would, ultimately, like to be able to kick off both processes cleanly using only the "npm start" script.
ex. Webpack Bundles -> Nodemon Starts -> Webpack Watchers Start
Does anybody have any thoughts on this topic?
I ended up creating a custom build script using the Webpack/Nodemon Node APIs as opposed to the CLIs. This option provided much more flexibility for me to customize the terminal output to my liking.
import webpack from 'webpack';
import nodemon from 'nodemon';
import webpackConfig from './webpack.config.babel';
const compiler = webpack(webpackConfig);
compiler.run((runErrors, runStats) => {
console.log(runStats.toString({
cached: false,
colors: true,
assets: true,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
}));
console.log();
nodemon({
script: 'build/server.bundle.js',
watch: 'build/server.bundle.js'
}).on('restart', () => {
process.env.NODEMON_STATUS = 'restarted';
});
compiler.watch({}, (watchErrors, watchStats) => {
const hasErrors = watchErrors || watchStats.hasErrors();
if (hasErrors) {
console.log((watchStats.toString({
cached: false,
colors: true,
assets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
errors: true,
errorDetails: true,
hash: false,
modules: false,
timings: false,
warnings: false,
version: false,
children: false,
reasons: false,
source: false,
})));
}
});
});
process.on('SIGINT', () => {
process.exit(0);
});
process.on('SIGTERM', () => {
process.exit(0);
});
process.on('SIGUSR2', () => {
process.exit(0);
});
process.on('exit', () => {
process.exit(0);
});
If nodemon automatically restart your server on file changes you can use a package called concurrently.
First install concurrently as a dev dependency.
npm i concurrently --save-dev
After that edit your package.json
"start": "**webpack build** && concurrently --kill-others \"nodemon app.js\" \"**webpack watch**\""
ps: I added ** placeholders, you should change the commands between them with your commands which builds and watches.
I am switching my SPA web app from Durandal to Aurelia and am now taking a look at the bundling process.
I use gulp to bundle the app and I followed the instructions on this Aurelia documentation page and other resources on the web. It works but there are some unclear things to me.
This is my gulpfile.js
var gulp = require('gulp'),
bundler = require('aurelia-bundler'),
uglify = require('gulp-uglify'),
htmlmin = require('gulp-htmlmin'),
del = require('del');
var config = {
force: true,
baseURL: '.', // baseURL of the application
configPath: './config.js', // config.js file. Must be within `baseURL`
bundles: {
"Scripts/build/app-build": { // bundle name/path. Must be within `baseURL`. Final path is: `baseURL/dist/app-build.js`.
includes: [
'[Scripts/app/**/*.js]',
'Scripts/app/**/*.html!text',
'Content/*.css!text'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
},
"Scripts/build/vendor-build": {
includes: [
'jspm_packages/npm/babel-runtime#5.8.38/helpers/class-call-check.js',
'jspm_packages/npm/babel-runtime#5.8.38/helpers/create-class.js',
'jspm_packages/npm/babel-runtime#5.8.38/core-js/object/define-property.js',
'jspm_packages/npm/core-js#1.2.7/library/fn/object/define-property.js',
'jspm_packages/npm/babel-runtime#5.8.38/core-js/object/define-properties.js',
'jspm_packages/npm/core-js#1.2.7/library/fn/object/define-properties.js',
'npm:aurelia-framework#1.0.7',
'npm:aurelia-loader-default#1.0.0',
'npm:aurelia-logging-console#1.0.0',
'npm:aurelia-templating-binding#1.0.0',
'npm:aurelia-templating-resources#1.1.1',
'npm:aurelia-templating-router#1.0.0',
'npm:aurelia-knockout#1.0.2',
'npm:aurelia-history-browser#1.0.0',
'npm:aurelia-bootstrapper#1.0.0',
'npm:aurelia-fetch-client#1.0.1',
'npm:aurelia-router#1.0.6',
'npm:aurelia-animator-css#1.0.1',
'npm:babel-core#5.8.38',
'npm:babel-runtime#5.8.38',
'npm:core-js#1.2.7',
'github:systemjs/plugin-text#0.0.9'
],
options: {
inject: true,
minify: true,
depCache: true,
rev: true
}
}
}
};
gulp.task('build', ['minify'], function () {
return bundler.bundle(config);
});
And this is config.js
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"es7.decorators",
"es7.classProperties",
"runtime"
],
"compact": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
},
map: //some mappings
}
If I run the gulp task to bundle, it works, and I can load my app using the bundled files, but there are some things I don't understand:
After the bundled files are created, the config.js file is updated within the "bundles:" property with the files which have been created for the bundle, and a random versioning number (since I had set 'rev: true' in the options)
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
]
]
When I run the task again, maybe after some changes, the new bundled file has been added to the config.js file like that:
bundles: [
"Scripts/build/vendor-build-4c2789cace.js": [
//list of files
],
"Scripts/build/vendor-build-t67uj8e5f4.js": [
//list of files
]
]
but as you can see, the old one is still there. How do I tell him to "clear" the bundles property when I create a new bundle?
I'm trying to build my JS-bundle via grunt/browserify. I also use grunt for scss compile. For that I use grunt-watch to trigger scss compile on changes.
I wanted the same behavior for JS-browserify. grunt-browserify comes with the "watch" option, which does the trick very well.
My only issue is: I want to get notified after a "re-browserify". For SCSS I use grunt-notify. But I do not find any way to trigger a grunt task after browserify-watch.
My gruntfile excerpt:
var gruntOptions = {
notify: {
browserify_node_modules: {
options: {
title: "Browserify",
message: "node_modules build"
}
}
},
browserify: {
node_modules: {
src: ["node_modules.js"],
dest: "trunk/js/lib/node_modules.js",
options: {
watch: true,
}
}
}
};
Best case scenario:
options: {
watch: true,
finishTask: "notify:browserify_node_modules"
}
Thanks!
You can check if the file generated by Browserify has been changed and then, trigger a task.
Install watch task in Grunt:
npm install grunt-contrib-watch --save-dev
Configure watch task within Gruntfile.js:
grunt.initConfig({
// other tasks
your_task: {
// ...
},
watch: {
dev: {
files: 'trunk/js/lib/node_modules.js', // file generated by Browserify
options: { spawn: false },
tasks: ['your_task']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
I've recently converted a canvas library I wrote into typescript. I've broken the code down into classes and they all attach themselves to a cnvs module, but i'm have a hard time compiling these down to one file.
Ideally I would like to have my files run through browserify, but at the moment i just want to get it working.
One file may look like
module cnvs {
export class Shape {
// stuff here
}
}
and then another would be
/// <reference path="Shape.ts" />
module cnvs {
export class Rect extends Shape {
// rectangle stuff here
}
}
Originally I was using import Shape = require('./Shape') (with some variants, like including extension and not including leading './')
In my cnvs.ts file I would to export the cnvs module, so that when it compiles I have a single file with the entire code base in, attaching to the window OR multiple files that could then be compiled with browserify into a single file.
The full code is at http://github.com/allouis/cnvs
Thanks
Checkout out typeify:
https://github.com/bodil/typeify
Please note it run on node.js.
You can simply compile the whole project using using --out out.js typescript compiler argument. This will merge all your files for you and generate an out.js.
One thing to be aware of is that the order of code in the arguments. Check out https://github.com/basarat/grunt-ts#javascript-generation-and-ordering
I use browserify & ```typescriptifier``'...
So you would do:
/// <reference path="Shape.ts" />
...
require("Shape.ts");
This is some of my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dev: ['dest/**/*.*']
},
browserify: {
dev: {
src: ['src/root.ts'],
dest: 'dest/App.js',
options: {
external: ['angular'],
transform: ['typescriptifier'],
debug: true,
bundleOptions: { debug: true },
browserifyOptions: { debug: true }
}
}
},
express: {
dev: {
options: {
bases: ['src'],
port: 5000,
hostname: '0.0.0.0',
livereload: false
}
}
},
watch: {
ts: {
files: ['src/**/*.ts', '!src/**/*.d.ts'],
tasks: ['dest'],
options: {
livereload: true,
debug: false,
debounceDelay: 100
}
},
html: {
files: ['src/**/*.css', 'src/**/*.html'],
options: {
livereload: true,
debug: false,
debounceDelay: 100,
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
grunt.registerTask('build', ['browserify:dev']);
grunt.registerTask('rebuild', ['clean:dev', 'build']);
};
See
https://www.npmjs.org/package/typescriptifier