i have a UI Project that grunts the files and copies to the dist folder.
The problem is - the dist folder has some static js files on its own. (for eg library files )
So for eg : my UI folder has 1.js, 2.js
My Dist file has 1.js, 2.js and also lib1.js, lib2.js.
When i run my run copy command, i am expecting to copy 1.js and 2.js and place it in my dist folder - which happens. But what it also does is- it deletes the other files and folders like lib1.js and lib2.js.
Anyway I can only "Overwrite" the files but not delete anything else?
I use the following :
{
expand: true,
cwd: '<%= globalConfig.path.build %>/js/pages/',
src: ['*.js'],
dest: '<%= globalConfig.path.dist %>/js/pages/'
}
Related
I have in my Scripts folder a "Lib" folder and an "App" folder.
The Lib folder contains 3rd part library JavaScript files. Some of these are minified without the original sources, others we have the original sources for.
The App folder contains all of our own JavaScript files, all of which are not minified.
I'm new to Grunt but I have a gruntfile which does the following:
Uglifies all the JS files in the Lib folder and produces minified versions with sourcemaps.
Uglifies all the JS files in the App folder and produces minified versions with sourcemaps.
Obvious problem: some of the files in the Lib folder are minified, so minifying them again/generating source maps is a bad idea and can fail for various reasons.
My solution: I run Uglify only on .js files in the Lib folder into lib-unmin.min.js. I then concat all the already minified files into a lib-min.min.js file, then I concat both those files together to get lib.min.js.
The new problem
What if I can't concat the already minified scripts to the end of the other minififed scripts without it breaking?
I have a dependency issue like this:
scripts/lib/a.js (required for b to run)
scripts/lib/b.min.js (required for c to run)
scripts/lib/c.js (required for the App scripts to run)
If I have an array of these file paths in my gruntfile, in that order, what's the easiest way of uglifying/concating all the files into a single minified JS file in that order, making sure we don't attempt to minify the minified file?
What do other developers do in similar situations?
Thanks!
I like to concat the files then uglify all of them together. This way uglify makes sure there aren't duplicate variable values overriding each other when it compresses the variable names.
You can bundle as many files as you want in the concats. Make different concat groups to uglify together and maintain the 'first, second, third, ...' order like this:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
app: {
options: {
sourceMap: true,
sourceMapName: 'build/maps/map.map'
},
files: {
'build/app.min.js': ['build/js/app-first-unmin.js', 'build/js/app-second-min.js', 'build/js/app-third-unmin.js']
}
}
},
concat: {
options: {
separator: ';'
},
firstUnminified: {
src: [
'lib/underscore.js'
],
dest: 'build/js/app-first-unmin.js'
},
secondMinified: {
src: [
'lib/moment.min.js'
],
dest: 'build/js/app-second-min.js'
},
thirdUnminified: {
src: [
'lib/favico.js'
],
dest: 'build/js/app-third-unmin.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat:firstUnminified', 'concat:secondMinified', 'concat:thirdUnminified','uglify']);
};
I am looking for GRUNT automation task which watches the less files in the root directory and gives us the css files of the same name as the less files in the same directory like
Root Folder
package.json
Gruntfile.js
Folder1
file1.less
file2.less
Folder2
file3.less
file4.less
My Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
//our LESS options
less: {
development: {
files: {
"": "" //not able to write this line, how can i mention which file to compile as i am watching the entire folder
}
}
},
watch: {
css: {
files: '**/*.less',
tasks: ['less']
}
}
});
//load our tasks
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
//default tasks to run
grunt.registerTask('default', ['less']);
}
Not able to mention the source less file name and result css file name in less task config, as i am watching the entire folder, i want to create the css file for the corresponding less file in the same path as less, whenever particular css is changed. Want to compile the less file which is changed , not all the less files to be compiled, if one less is changed.
Thanks in advance for any help.
You can use grunt-newer to configure you less task to run with newer files only.
npm install grunt-newer --save-dev
once the plugin is installed, add
grunt.loadNpmTasks('grunt-newer');
edit the watch task:
watch: {
css: {
files: '**/*.less',
tasks: ['newer:less']
}
}
Have a look at the grunt.js docu and see how to build files object dynamically.
I've recently started exploring grunt and I've done so by trying out the
https://github.com/ng-vu/ng-express-boilerplate seed.
It uses a gruntfile to copy static assets, css, javascript to a destination folder with this code:
dist_js: {
files: [{
src: ['<%= app_files.js %>', '<%= vendor_files.js %>'],
dest: '<%= dist_dir %>/public',
cwd: '.',
expand: true
}]
}
where dist_dir is 'dist'.
Now in the config files it is specified that in development we want to serve assets, src and vendor files from their original location, so the configuration of express for development is as follows:
app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
app.use('/src', express.static(path.resolve(__dirname, '../../src')));
app.use('/vendor', express.static(path.resolve(__dirname, '../../vendor')));
In production, the code is:
app.use(express.static(path.join(__dirname, 'public')));
When I move this to production (specifically to openshift), the index.html template is served with all the script and link tags, but the scripts and css are not found. What I get is 'Cannot GET file.css' for example.
I run grunt build and compile on the cloud and the output is 'Done, without errors', but the files are nowhere to be found. I've tried one too many things and I've run out of ideas. Have I missed out something fundamental about grunt?
EDIT:
The problem was that the javascript files doing the routing are located inside src/server, so __dirname pointed to that location. Grunt however did the copying inside the project root.
app.use(express.static(path.join(__dirname, '../../dist/public')));
This fixed the problem.
You need to expose your assets with a route.
app.use(express.static(path.join(__dirname, 'dist/public')));
You need to modify your package.json file to call grunt after running npm install. To do this add the following.
"scripts": {
"start": "node ./src/server/app.js",
"postintall": "grunt build; grunt compile"
}
Additionally it might be good to define a new grunt task that combines these two tasks.
Gruntfile.js
grunt.registerTask("prep-for-cloud", [ "compile", "build" ]);
Then your package.json would look like the following.
"scripts": {
"start": "node ./src/server/app.js",
"postintall": "grunt prep-for-cloud"
}
Also you should add grunt-cli to your package.json file as a dependency.
I have following stucture of the project:
- _build/
- build-tools/
- gulpfile.js
- someFolder/
- excludeFolder/
- index.html
I want to copy all the files except _build and 'excludeFolder' dir to the _build/release directory.
I am using this gulp task:
gulp.src(['*',
'!_build/**/*',
'!build-tools/**/*',
'!excludeFolder/**/*'],{base:'..'})
.pipe(gulp.dest('_build/release'));
How can I command Gulp to start relative path from upper root directory, or any other directory that the gulfile.js is located?
As far as I understand the behavior your looking is cwd, not base
gulp.src([
'**',
'!_build',
'!_build/**',
'!build-tools',
'!build-tools/**',
'!excludeFolder',
'!excludeFolder/**'
],{ cwd:'..' })
.pipe(gulp.dest('_build/release'), { cwd: '..' });
base is a tricky property, which aims to say to gulp where to start copying the files based on the cwd, but that doesn't mean that you can omit the parent folder .. call on gulp.src (your case specifically).
I need to compile *.less files in different folder inside public directory. I've git this dir structure:
/public:
/stylesheets:
/less:
style.less
/css:
style.css
/js
/img
...
In my app configure function I've got following:
app.use(require('less-middleware')({
src: '/less',
dest: '/css',
root: path.join(process.cwd(), 'public/stylesheets')
}));
app.use(express["static"](path.join(process.cwd(), 'public')));
But It does't work. Less files never compiles in css folder. Whats wrong?
PS: I could access to the less folder via path: /stylesheets/less/style.less. But why? Why not just /less/style.less? Thanks for any help!