I'm trying to upload a file to a server on change using grunt-run and curl. I can get it to work if I hard code the file name into the actual task, but I'm trying to run it based on the file that changed...here's my grunt file so far (stripped down to the parts related to this question).
module.exports = function(grunt) {
var config = require('./config.json');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
less : {
files : ['front-end/less/**/*.less'],
tasks : ['newer:less','sync:css','run:deploy_less_files']
},
},
less: {
development: {
options: {
paths: ['front-end/_builds/css'],
sourceMap : true,
},
files: [{
cwd: "front-end/less",
expand : true,
src : [ '**/*.less', '!_settings.less'],
dest : "front-end/_builds/css",
ext: ".css"
}]
},
},
sync : {
target: {},
css : {
expand: true,
flatten :true,
verbose: true,
cwd : "front-end/_builds/css/",
src : "**/*.css",
dest : "target/css/"
},
},
run : {
deploy_less_files : {}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-run');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['watch']);
grunt.event.on('watch', function(action, filepath, target) {
if (target == "less") {
grunt.config.set('run.deploy_less_files.exec','curl -u ' + config.credentials.user + ':' + config.credentials.pw + ' -T ' + filepath + ' http://localhost:8080/assets/less/');
grunt.task.run("run:deploy_less_files");
}
});
}
Here's what I am trying to do in order:
Watch all LESS files in /front-end/less
If a file changes, compile it to css and place in front-end/_builds/css directory
Sync the contents of front-end/_builds/css with my target/css directory.
Upload the file via curl to my localhost.
Ideally, I'd like to just grab the css file from either my target or the _builds directory and upload it to my localhost, but I can sort that out if I can get this part working.
Any help would be appreciated. Thanks.
See this comment in the grunt-contrib-watch github repo. Excerpts from it read:
"Don't use grunt.event.on('watch') to run your tasks."
and...
"The watch event is not intended for running tasks."
However, you can utilize the grunt.event.on('watch', ...) listener to configure the exec property.
The following gist shows how to meet your requirement:
Gruntfile.js
module.exports = function(grunt) {
var config = require('./config.json');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
less : {
files : ['front-end/less/**/*.less'],
tasks : ['newer:less','sync:css'/*,'run:deploy_less_files'*/]
},
// 1. Added new target to watch the directory in which the resultant
// .css files are saved. Set the `task` to `run:deploy_css_files`.
// The `nospawn` option must be set to true.
generatedCss : {
files : ['target/css/**/*'],
tasks : ['run:deploy_css_files'],
options: {
nospawn: true
}
}
},
less: {
development: {
options: {
paths: ['front-end/_builds/css'],
sourceMap : true,
},
files: [{
cwd: "front-end/less",
expand : true,
src : [ '**/*.less', '!_settings.less'],
dest : "front-end/_builds/css",
ext: ".css"
}]
},
},
sync : {
target: {},
css : {
expand: true,
flatten :true,
verbose: true,
cwd : "front-end/_builds/css/",
src : "**/*.css",
dest : "target/css/"
},
},
run : {
deploy_css_files : {// 2. Renamed target and added `exec` key. The
exec: '' // `exec` value is intentionally empty and will
} // be configured via the `watch` event listener.
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-run');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-newer');
// 3. 'less' and 'sync' targets are aliased before the `watch`
// task to ensure the path defined in the `files` property of the
// `watch:generatedCss` task exists before `watch`ing.
grunt.registerTask('default', ['less', 'sync', 'watch']);
// 4. Listen for changes via the `watch:generatedCss` target only.
// Configures the `exec` property of the `run:deploy_css_files`
// target to `curl` the most recently created `.css` file.
grunt.event.on('watch', function(action, filepath, target) {
if (target === 'generatedCss') {
var cmd = 'curl -u ' + config.credentials.user + ':' +
config.credentials.pw + ' -T ' + filepath +
' http://localhost:8080/assets/less/';
grunt.config('run.deploy_css_files.exec', cmd);
}
});
}
Further explanation
Firstly, in the Gruntfile.js above, you'll notice that run:deploy_less_files alias has been omitted from your original watch.less.tasks array. Then the following changes were made:
Added a new target named generatedCss to the watch Task. Its files value specifies the path to the directory in which the resultant .css files are saved. The value in the task property array is set to run:deploy_css_files. The nospawn option is set to true.
Note As you mentioned the following in your question:
"Ideally, I'd like to just grab the css file from either my target or the _builds directory and upload it to my localhost,.."
I chose to name the target generatedCss and renamed the task to run deploy_css_files (instead of deploy_less_files) as this better reflects the actual intent.
The files that ultimately get uploaded via curl to your localhost will be from the target/css/ directory, simply because that's the directory we're watching for changes.
Replaced your original run task with the following instead:
run : {
deploy_css_files : {
exec: ''
}
}
Note The target has been renamed and the exec property added. Its value is intentionally empty as this will be configured via the watch event listener.
less and sync targets are aliased before the watch task of the default registered task. This ensures that, (when initially running grunt via your CLI), the path defined in the files property of the watch:generatedCss task exists before watching begins.
Finally, in the grunt.event.on('watch', ...) listener we listen for changes via the watch:generatedCss target only and configure the exec property of the run:deploy_css_files target to curl the most recently created .css file.
Running
When running the grunt command via your CLI any changes made to the .less files, (i.e. those residing in the /front-end/less directory), will trigger the tasks in the correct order (as per your listed points 1-4).
Caveat: I didn't actually test running the curl command, however the file path for the most recent generated .css file is assigned to the filepath variable in the grunt.event.on('watch', ...) listener, thus it can be referenced when configuring the run.deploy_css_files.exec task/target.
Note: you'll need to ensure the server supports POST requests for your curl command to succceed (i.e. it's not something like SimpleHTTPServer).
Related
During my Grunt build process, I would like to set the script tag in my index.html which references the Google Maps API dynamically based on process.env.NODE_ENV.
Something like:
let googleMapsUrl;
if (process.env.NODE_ENV === 'development') {
googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
} else {
googleMapsUrl = `//maps.googleaps.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}v=3.exp&libraries=visualization`;
}
My question is how do I then insert googleMapsUrl into a script tag in index.html like so: <script src=googleMapsUrl></script>
There are many options that you could use. From simple, like grunt-replace to more advanced ones like grunt-processhtml. I will describe the first one as it’s a good option for simple tasks and requires just a simple configuration.
Using grunt-replace
grunt-replace will search for simple variable definitions like ##foo in your source files, and replace those variables with your supplied value or the returning value from a callback.
First install the plugin using npm install grunt-replace --save-dev
Then configure the task as follows:
replace: {
dist: {
options: {
patterns: [
{
match: 'gmaps',
replacement: function() {
var googleMapsUrl;
if(process.env.NODE_ENV === 'development') {
googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
} else {
googleMapsUrl = '//maps.googleaps.com/maps/api/js?key=' + process.env.GOOGLE_MAPS_API_KEY + 'v=3.exp&libraries=visualization';
}
return googleMapsUrl;
}
}
]
},
files: [
{
expand: true,
flatten: true,
src: ['path/to/your/source/file.html'], dest: 'destination/folder/'
}
]
}
}
Load the plugin using grunt.loadNpmTasks('grunt-replace') and then add it to your build process.
On your source files just add the defined variable as your script source:
<script src="##gmaps"></script>
The task will replace ##gmaps with the returning value from the defined callback.
Hope it helps.
More about plugin can be found here.
The following is my simple gulp task:
gulp.src is getting script.js as input
minifies script.js and saves script.min.js
removes console.log from both script.js and script.min.js
updates script.js file and saves script.min.js
I want to simply remove console.log from a minified file (or script.min.js) not from script.js, and I am failing. I am looking for a way to run .pipe(gulpRemoveLogging... only on a minified file (i.e. script.min.js) and do not modify anything from script.js
var gulp = require("gulp"),
minify = require("gulp-minify"),
gulpRemoveLogging = require("gulp-remove-logging");
var _dist_path = "./dist/"; // relative path
// minify JS files
gulp.task("minify-js", function() {
return gulp.src(path.join(_dist_path, "/*.js"))
.pipe(minify({
ext: {
src: ".js",
min: ".min.js"
},
ignoreFiles: ["-min.js"]
}))
.pipe(gulpRemoveLogging({
namespace: ["console", "window.console"] // remove these namespaces. e.g. console.log("..."), window.console.log("...")
}))
.pipe(gulp.dest(_dist_path));
});
Solved the problem:
Added .pipe(gulpIgnore("smartsitescripts.js")) between .pipe(minify({ ... and .pipe(gulpRemoveLogging ...
var gulpIgnore = require("gulp-ignore");
...
.pipe(minify({
ext: {
src: ".js",
min: ".min.js"
},
ignoreFiles: ["-min.js"]
}))
.pipe(gulpIgnore("script.js")) // <---- this line solved the problem
.pipe(gulpRemoveLogging({
namespace: ["console", "window.console"] // remove these namespaces. e.g. console.log("..."), window.console.log("...")
}))
...
That line of code will exclude script.js from stream hence stream will contain only script.min.js.
I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
Here's my grunt file:
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?
EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.
/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: [
"public/lib/js/jquery/jquery.js",
"public/lib/js/bootstrap/bootstrap.js",
"public/lib/js/fullpage.js/jquery.fullpage.js",
"public/lib/js/jquery-easing-original/jquery.easing.js",
"public/lib/js/slimscroll/jquery.slimscroll.js",
"public/lib/js/wow/wow.js",
"public/js/cts.js"
],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
Your issue seems to be in concate.js.src
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]
This will have your files added multiple times as there might some files common among the paths mentioned in src.
You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.
Your src should then look something like
src: ["vendor/**/*.js", "public/**/*.js"]
As you see now there are no common files among these two paths.
Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.
EDIT:
Ah! I see whats your problem. You want to have jquery first among the other vendor files.
public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.
Try this
src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js", "!public/lib/jquery/jquery.js", public/js/cts.js"]
Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js
Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns
If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.
How do I pass information between grunt tasks? I would like to pass a value from a grunt task to another grunt task.
My situation is that after completing a protractor test, I would like to pass a value to a new grunt task. To achieve this, I went ahead and set the value in process.env and tried to use process.env in the new grunt task. But that doesn't seem to work
This is conf.js:
afterLaunch: function(exitCode) {
return new Promise(function(fulfill, reject) {
if (typeof jasmine.getEnv().testReportFilePath !== 'undefined' && jasmine.getEnv().testReportFilePath !== null) {
process.env.testReportFilePath = jasmine.getEnv().testReportFilePath;
console.log('Trying: ' + process.env.testReportFilePath);
fulfill('Success: Environment variable testReportFilePath is set in conf.js');
} else {
reject(new Error('Failed: Environment variable testReportFilePath not set in conf.js'));
}
});
And this is my Gruntfile:
grunt.loadNpmTasks('grunt-protractor-runner');
grunt.loadNpmTasks('grunt-protractor-webdriver');
grunt.loadNpmTasks('grunt-execute');
grunt.config('protractor', {
require: [ setTesting ],
options: {
configFile: 'conf.js', // common 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.
},
run_specific_suite: {
options: {
args: {
baseUrl: '<%= grunt.option("testUrl") %>',
browser: '<%= grunt.option("testBrowser") %>',
params: {
environment: '<%= grunt.option("testEnv") %>'
},
suite: '<%= grunt.option("testSuite") %>'
}
}
},
});
grunt.config('execute', {
email_stakeholders: {
options: {
args: [
process.env.testReportFilePath,
'myemail#email.com'
]
},
src: ['toDelete.js']
}
});
But process.env.testReportFilePath appears to be undefined in the gruntjs file.
This answer is long overdue. I did follow #mparnisari suggestion to write the variable out to the file. So I did the following in my conf.js to write the value into a yaml file :
fs.writeFileSync(path.join(process.cwd(),'_testReportFilePath.yml'),
'testReportFilePath: ' + jasmine.getEnv().testReportFilePath);
and in the gruntfile, the yaml file read using the grunt api :
// --- grunt execute task --- //
grunt.config('execute', {
email_stakeholders: {
options: {
args:[
grunt.file.readYAML(path.join(process.cwd(),'_testReportFilePath.yml')).testReportFilePath, // html report
'myemail#email.com'//enter the recipient emails here
]
},
src: ['test/scripts/nightlyPostTasks.js']
}
});
and appears to do what I need. Only quirk is that a dummy yaml file with the name _testReportFilePath.yml must always be present in CWD to prevent any grunt error.
I want to work with closure compiler, so I added grunt-closure-tools to my Grunt config, but my config is erroring with:
Verifying property closureCompiler.loader exists in config...ERROR
Here is the reference material for grunt-closure-tools:
https://www.npmjs.com/package/grunt-closure-tools
or
https://github.com/thanpolas/grunt-closure-tools
Here is my GruntFile.js:
module.exports = function(grunt) {
var path = require('path');
require('load-grunt-config')(grunt, {
//pkg: grunt.file.readJSON('package.json'),
configPath: path.join(process.cwd(), 'grunt'), //path to task.js files, defaults to grunt dir
init: true, //auto grunt.initConfig
data: { //data passed into config. Can use with <%= test %>
pkg: require('./package.json')
},
loadGruntTasks: { //can optionally pass options to load-grunt-tasks. If you set to false, it will disable auto loading tasks.
pattern: ['grunt-contrib-*', 'grunt-jslint', 'grunt-newer', 'imagemin-*','grunt-closure-tools'],
scope: 'devDependencies'
},
postProcess: function(config) {} //can post process config object before it gets passed to grunt
});
//require('load-grunt-tasks')(grunt);
grunt.registerTask("default", ["newer:jslint", "newer:concat", "closureCompiler:loader", "newer:sass"]);
};
I am using load-grunt-config to break up my config into multiple parts. Here is my closure.js file, mostly modeled on grunt-closure-tools github page example:
module.exports = {
options: {
compilerFile: '/usr/local/Cellar/closure-compiler/20141023/libexec/build/compiler.jar',
checkModified: true,
compilerOpts: {
create_source_map: null,
compilation_level: 'ADVANCED_OPTIMIZATIONS',
},
d32: true, // will use 'java -client -d32 -jar compiler.jar'
},
util: {
src: 'includes/javascript/util/util.js',
dest: 'includes/javascript/build/util.min.js'
},
loader: {
src : 'includes/javascript/loaders/loader.js',
dest: 'includes/javascript/build/loader.min.js'
}
};
Any help with this error is appreciated.
After some digging and no small amount of thrashing of teeth, I have managed to getting my config working. My Gruntfile.js:
module.exports = function(grunt) {
var path = require('path');
require('load-grunt-config')(grunt, {
//pkg: grunt.file.readJSON('package.json'),
configPath: path.join(process.cwd(), 'grunt'), //path to task.js files, defaults to grunt dir
init: true, //auto grunt.initConfig
data: { //data passed into config. Can use with <%= test %>
pkg: require('./package.json')
},
loadGruntTasks: { //can optionally pass options to load-grunt-tasks. If you set to false, it will disable auto loading tasks.
pattern: ['grunt-contrib-*', 'grunt-jslint', 'grunt-newer', 'imagemin-*','grunt-closure-tools'],
scope: 'devDependencies'
},
postProcess: function(config) {} //can post process config object before it gets passed to grunt
});
//require('load-grunt-tasks')(grunt);
grunt.registerTask("default", ["newer:jslint", "newer:concat", "closureCompiler:loader", "newer:sass"]);
};
and my closureCompiler.js file (shortened for clarity):
module.exports = {
options: {
compilerFile: '/usr/local/Cellar/closure-compiler/20141023/libexec/build/compiler.jar',
checkModified: true,
compilerOpts: {
// create_source_map: null
},
execOpts: {
maxBuffer: 999999 * 1024
},
TieredCompilation: true // will use 'java -server -XX:+TieredCompilation -jar compiler.jar'
},
loader: {
TEMPcompilerOpts: {
create_source_map: 'includes/javascript/build/loader.min.js.map'
},
src : 'includes/javascript/loaders/loader.js',
dest: 'includes/javascript/build/loader.min.js'
}
};
I had quite a few errors in my config:
I had to rename closure.js to closureCompiler.js so load-grunt-config could find the file. Oops, my bad.
The d32: true switch on the Closure Compiler means use 32-bit JVM, which I do not have on my system. I switched to TieredCompilation: true instead.
create_source_map: null in the options did not work for me. I found the reference in the source code of grunt-closure-tools but didn't spend the time to sort out what was wrong. Instead, I added TEMPcompilerOpts to the target config with the map file I wanted Closure to make.
I hope other benefit from my experience with this solution. From this point, I am going to use the ability of Closure Compiler to create source maps to merge my dev and prod build targets into a single target.