I created an javascript app using Oracle JET v2.0. Running
grunt build:release
creates release folder in the project root folder. How to change this to point to another path, for example outside project root?
If you're using the Yeoman generator, you can follow the Grunt flow in scripts/grunt/tasks/build.js. You'll see under if (target === "release")
that it runs a number of tasks in order.
Unfortunately the release folder name is hardcoded in many of those tasks' config files. So it might make more sense to add a task at the end of your build:release task to copy the built release into a new directory. You could add a target to the scripts/grunt/config/copy.js file named myFinalRelease:
module.exports = {
release:
{
src: [
"**",
"!bower_components/**",
"!grunt/**",
"!scripts/**",
"!js/**/*.js",
"js/libs/**",
"!js/libs/**/*debug*",
"!js/libs/**/*debug*/**",
"!node_modules/**",
"!release/**",
"!test/**",
"!.gitignore",
"!bower.json",
"!Gruntfile.js",
"!npm-shrinkwrap.json",
"!oraclejetconfig.json",
"!package.json"
],
dest: "release/",
expand: true
},
myFinalRelease:
{
cwd: 'release/',
src: ['**'],
dest: "myRelease",
expand: true
}
};
Then add that task:target as a copy step on the last line of the release section of scripts/grunt/tasks/build.js:
...
if (target === "release")
{
grunt.task.run(
[
"clean:release",
"injector:mainReleasePaths",
"uglify:release",
"copy:release",
"requirejs",
"clean:mainTemp",
"copy:myFinalRelease"
]);
}
...
To make this more robust, you should do some additional cleanup tasks if you're doing a lot of build:release'ing, because the myRelease folder won't get cleaned out unless you create tasks to do it. Or you might look into other Grunt plugins like grunt-contrib-rename.
If this is too much copying and too messy for your tastes, you could instead edit all of the hardcoded task configs to change the name of the release directory. You'll find the directory name shows up in these four files:
scripts/grunt/config/clean.js
...
release: ["release/*"],
...
scripts/grunt/config/uglify.js
...
dest:"release/js"
...
scripts/grunt/config/copy.js
...
dest: "release/",
...
scripts/grunt/config/require.js
...
baseUrl: "./release/js",
name: "main-temp",
mainConfigFile: "release/js/main-temp.js",
optimize: "none",
out: "release/js/main.js"...
...
Related
The source config example below processes files from src dir. There is src2 dir which also should be processed with the same tasks and putted to build2. What changes required in config.
module.exports = function (grunt) {
var saveLicense = require('uglify-save-license');
grunt.initConfig({
clean : {
build : {
src : ['build']
},
},
copy : {
files : {
cwd : 'src',
src : '**/*',
dest : 'build',
expand : true
}
},
...
Both grunt-contrib-copy and grunt-contrib-clean, like many other grunt plugins, allow multiple Targets to be specified in each Task.
For your scenario you can simply configure two Targets in the copy task (one Target to copy the src folder and another Target to copy the src2 folder).
You can also configure two Targets in the clean task (one Target to clean the build folder and another Target to clean the build2 folder).
Gruntfile.js
Your Gruntfile.js can be configured as ass follows:
module.exports = function(grunt) {
var saveLicense = require('uglify-save-license');
grunt.initConfig({
// The 'clean' task now includes two targets.
// named 'build1' and 'build2'
clean: {
build1: {
src: ['build']
},
build2: {
src: ['build2']
}
},
// The 'copy' task now includes two targets.
// named 'src1' and 'src2'
copy: {
src1: {
cwd: 'src',
src: '**/*',
dest: 'build',
expand: true
},
src2: {
cwd: 'src2',
src: '**/*',
dest: 'build2',
expand: true
}
}
// ...
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
// Registering the Targets in the Tasks....
grunt.registerTask('copySrc1', ['copy:src1']);
grunt.registerTask('cleanBuild1', ['clean:build1']);
grunt.registerTask('copySrc2', ['copy:src2']);
grunt.registerTask('cleanBuild2', ['clean:build2']);
grunt.registerTask('copyBoth', ['copy']);
grunt.registerTask('cleanBoth', ['clean']);
};
Running the Grunt Tasks
You'll notice that there are six calls to the .registerTask(...) function at the end of the snippet. Namely; copySrc1, cleanBuild1, copySrc2, cleanBuild2, copyBoth, and cleanBoth.
They allow you to run the following commands via your command line:
$ grunt copySrc1
(This will copy the src folder to the build folder)
$ grunt cleanBuild1
(This will clean the build folder)
$ grunt copySrc1
(This will copy the src2 folder to the build2 folder)
$ grunt cleanBuild2
(This will clean the build2 folder)
$ grunt copyBoth
(This will copy the src folder to the build folder and copy the src2 folder to the build2 folder)
$ grunt cleanBoth
(This will clean both the build and build2 folders)
Notes
You probably only need to keep the two .registerTask(...) functions as follows:
grunt.registerTask('copyBoth', ['copy']);
grunt.registerTask('cleanBoth', ['clean']);
However, I included the other four .registerTask(...) functions as they demonstrate how you can call a single Target inside a Task using the semicolon notation (:). For example:
grunt.registerTask('copySrc1', ['copy:src1']);
In the above snippet the ['copy:src1'] part simply runs only the Target named src1 inside the copy Task.
Whereas:
grunt.registerTask('copyBoth', ['copy']);
... does not reference any Targets in the copy task, (i.e. no semicolon notation is used), therefore all Targets will be run.
To further understand Tasks, Targets, you can read my answer to this post.
Hope that helps!
I'm trying to use grunt in my ASP project, but for whatever reasons have get a stupid warning-message from Visual Studio.
How you can see down, the bower-task has been executed, but haven't uglify- and less-tasks. Gruntfile.js and folder "wwwroot" are in the same folder. What's wrong ?
This is console output in Visual Studio 2015:
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" bower
Running "bower:install" (bower) task
>> Installed bower packages
>> Copied packages to c:\T\BW\src\BW\wwwroot\lib
Done, without errors.
Process terminated with code 0.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" uglify_default
Running "uglify:uglify_target" (uglify) task
Process terminated with code 0.
>> Destination wwwroot/lib/angular/angular.js not written because src files were empty.
>> No files created.
Done, without errors.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" less
Running "less:dev" (less) task
>> Destination wwwroot/css/site.css not written because no source files were found.
Done, without errors.
Process terminated with code 0.
This is my gruntfile.js:
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
uglify: {
uglify_target: {
files: {
"wwwroot/lib/angular/angular.js":["src/angular.min.js"]
}
}
},
less: {
dev: {
files: {
"wwwroot/css/site.css": ["less/site.less"]
},
options: {
sourceMap: true,
}
}
},
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-less");
Are you sure "wwwroot/lib/angular/angular.js":["src/angular.min.js"] is correct in your uglify step? Uglify is for minifying files, so it would seem as if you have the destination and source parameters reversed. You are also getting the message Destination wwwroot/lib/angular/angular.js not written because src files were empty. which would seem to indicate that as well.
The less step seems correct, but it can't find the less file you are trying to compile. Are you sure that site.less exists in a less folder?
Here is the less portion of the grunt file I just wrote, and it seems to work well, although getting the sourcemap to actually generate is still an issue. This is pretty much an exact equivalent of VS 2013 with Web Essentials installed. Compiling all less files in the content folder using autoprefix for the browsers we support, and puts the .css back into the content folder. It doesn't compile any less file that starts with _, as those are just includes/variables.
less: {
development: {
options: {
paths: ["content"],
compress: true,
plugins: [
new (require('less-plugin-autoprefix'))({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"], map: { inline: false } })
]
},
files: [{
expand: true,
cwd: 'content',
src: ['*.less', '!_*.less'],
dest: 'content',
ext: '.css'
}]
}
},
I use grunt-contrib-concat, but it doesn't appear to work.
All file are in the folder.
I used --verbose to see the details, but everything seems to be working correctly.
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
//'assets/javascript/components/*.js',
'assets/javascript/components/jquery-ui-1.10.3.custom.js',
'assets/javascript/components/spectrum.js',
'assets/javascript/components/prefixfree.min.js',
'assets/javascript/src/jquery.menu_css3.js'
],
// the location of the resulting JS file
dest: 'assets/javascript/jquery.<%= pkg.name %>.min.js'
}
},
Running the tasks with --verbose:
Running "concat" task
Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: assets/javascript/src/jquery.menu_css3.js -> assets/javascript/jquery.menu_css3.min.js
Options: separator=";", banner="", footer="", stripBanners=false, process=false
Reading assets/javascript/src/jquery.menu_css3.js...OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
Running "uglify" task
Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: assets/javascript/jquery.menu_css3.min.js -> assets/javascript/jquery.menu_css3.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report=false
Minifying with UglifyJS...Reading assets/javascript/jquery.menu_css3.min.js...OK
OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
My directory structure looks like this:
-src/
-----pages/
----------...
-----...
-build
My gruntfile contains the following task:
copy: {
all:{
dest:"<%= builddir %>/",
src: ["src/**/*.{yaml,yml,py,html,htm,json,css}"],
rename:function(d, s){return d.replace("src/","");}
}
},
builddir: "build/<%= pkg.name %>-<%= pkg.version %>-<%= date %>",
When I run the copy task, it copies all the selected files into the directory containing the package name, version and build date, as expected, but it copies the entire src directory. while I only want to copy the contents of the src directory, so I'm trying to remove src/' from dest using therename`property, which doesn't work for some reason.
I've only started using grunt today, so I might be makiing a rookie mistake here.
Hmm... I think all you need is the cwd (current working directory) option. Unless you in fact want to flatten the files into a single directory.
copy: {
all:{
expand: true,
dest:"<%= builddir %>/",
src: ["**/*.{yaml,yml,py,html,htm,json,css}"],
cwd: "src/"
}
}
You'll need to set the flatten option, which removes the directory structure.
copy: {
all:{
expand: true,
flatten: true,
dest:"<%= builddir %>/",
src: ["src/**/*.{yaml,yml,py,html,htm,json,css}"]
}
}
I've been working a lot with grunt lately and trying to get up to speed on all the awesome things I can do with it. What I am attempting to do is set a variable for a src, and one for a destination directory and run a copy task to move my initial build files (updated from another source) to production destination directory. I can get the copy to work with this simple example but it brings over the src directory /build/ to assets
assets/js/build/vendor-library
I'm trying to not copy over the directory name build. so the copy just has the following /assets/js/vendor-library/*
module.exports = (grunt) ->
grunt.initConfig
copy:
main:
expand: "true"
src: "build/vendor-library/*"
dest: "assets/js/"
grunt.loadNpmTasks "grunt-contrib-copy"
grunt.registerTask "default", "copy"
Add the flatten option.
module.exports = (grunt) ->
grunt.initConfig
copy:
main:
expand: "true"
flatten: "true"
src: "build/vendor-library/*"
dest: "assets/js/"
grunt.loadNpmTasks "grunt-contrib-copy"
grunt.registerTask "default", "copy"