I have no idea how to minified my JSfiles using grunt.I hope someone can help me how to create grunt file in order to minified my js files step by step.
First, run npm init to create a package.json.
npm init
Then, create a Gruntfile.js file:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'path/to/your/minified.js': ['src/script1.js', 'src/script2.js', 'src/script3.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
To minify your JS files I recommend grunt-uglify.
Here is the documentation, but I will share the installation step by step.
Install the plugin via npm:
npm install grunt-contrib-uglify --save-dev
Then, add this in your Gruntfile.js:
grunt.loadNpmTasks('grunt-contrib-uglify');
The basic configuration is like this:
grunt.initConfig({
uglify: {
my_target: {
files: {
'path/to/your/minified.js': ['src/script1.js', 'src/script2.js', 'src/script3.js']
}
}
}
});
Your minified.js file is the result of the minification of all your js files.
Hope it helps.
Related
I've started to learn this just now. I installed the grunt.
If I get grunt watch it is automatic but only in case one file.
How could I make it wath all scss file in my theme, and make the css in different folders.
I don't really undestand how could it working in big.
This is my gruntfile.js now:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
uses_defaults: {}
},
sass: {
dev: {
options: { sourceMap: true },
files: { 'sites/all/themes/uj/css/uj.styles.css' : 'sites/all/themes/uj/sass/uj.styles.scss' }
}
},
watch: {
css: {
files: 'sites/all/themes/uj/**/*.scss',
tasks: [ 'sass:dev' ],
options: { livereload: true }
}
}
});
// Load Grunt plugins
// grunt.loadNpmTasks('');
// Default task(s).
grunt.registerTask('default', []);
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Per the official documentation on file globbing, to watch for changes for files of a certain file type in the directory path and its subdirectories, you'll want:
files: ['js/**/*.js']
or:
files: ['css/**/*.*']
I have two projects EasyUI and EasyUI-Layout. EasyUI-Layout depends on EasyUI. I have grunt files set up to build them and push them to github. Here are the abridged grunt files:
// easyui
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify:...,
bumpup: {
file: 'package.json'
},
shell: {
git: ...
},
watch: ...
});
grunt.registerTask('g', ['bumpup', 'browserify', 'shell:git']);
};
// easyui-layout
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify:...,
bumpup: {
file: 'package.json'
},
shell: {
git: ...,
npm: ...
},
watch: ..
});
grunt.registerTask('g', ['shell:npm', 'bumpup', 'browserify', 'shell:git']);
};
What I would like is that when I build and commit the EasyUI-Layout project, its package json is updated with the latest version number from EasyUI. At the moment, for example, the version number for EasyUI dependency in the package.json stays stuck on 0.0.0. Here is the abridged package.json file:
{
"name": "easyui-layout",
"version": "0.0.3",
"dependencies": {
"easyui": "0.0.0"
}
}
Say the EasyUI version number is 0.0.7, then the next time I build EasyUI-Layout with grunt I would like the package.json to be:
{
"name": "easyui-layout",
"version": "0.0.4",
"dependencies": {
"easyui": "0.0.7"
}
}
I assume this is possible with bump or bumpup? But a little experimentation has gotten me nowhere.
No, these types of things should be manually specified. You can use semver ranges though to have the package automatically install
Let me answer my own question. Since I'm publishing EasyUI to npmjs.org let's assume the latest version is up there. Here's the abridged grunt file for the EasyUI-Layout package:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
shell: {
npm: {
command: [
'npm install easyui#latest --save'
].join('&&')
}
}
});
This just forces npm to install the latest version of EasyUI and updates the package.json file.
Simple as that. No need for other grunt tasks, custom or otherwise, and nothing to do with semver.
Sorry, I'm newbie in npm-bower-grunt services. Maybe this question is stupid, but I can't find solution in google.
So, I have installed single page app based on npm/bower/grunt/angular.js
In the root I have gruntfile.js with this code
module.exports = function(grunt) {
var gtx = require('gruntfile-gtx').wrap(grunt);
gtx.loadAuto();
var gruntConfig = require('./grunt');
gruntConfig.package = require('./package.json');
gtx.config(gruntConfig);
// We need our bower components in order to develop
gtx.alias('build:standardversion', [
'compass:standardversion',
...
]);
gtx.finalise();
};
Else I have file grunt/compass.js with:
module.exports = {
standardversion: {
options: {
config: 'STANDARD/master/config.rb'
}
}
};
Then in bower_components folder I have gruntfiles for each plugin with code something like:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
...
},
uglify: {
...
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', [
'karma',
'uglify'
]);
};
So now I have to install css-flip plugin from here https://www.npmjs.com/package/grunt-css-flip
I installed it with npm and now I don't know where to write a task for this.
Am I need to create new file in bower_components or somewhere else?
Please tell me or give me a link to understand it properly
Thanx
I am using a foundation/jekyll boilerplate.
Whenever I run grunt, it only returns the following in my style.css
[object Object]
It should have processed the scss from the foundation files.
Here is the gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/style.css': 'scss/style.scss'
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
The only thing I had to do was npm install node-sass.
I ran grunt and the only code in my style.css was [object, Object]
edit: ran npm install grunt-sass,
css now compiles nicely.
It seems that there's an error with recent version of node-sass where in error situations node-sass pipes [object Object] instead of failing and showing a proper stacktrace.
Your Gruntfile worked fine for me in a reduced test case, so validate your scss files before running the task.
Also, update to the newest node-sass/grunt-sass with npm install node-sass -save-dev, as it doesn't seem to behave that way (but throws the proper error instead).
Just Getting started with grunt, and when I run grunt I get this error
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: grunt is not defined
This is my Gruntfile.js
module.exports = function(grunt){
'use strict';
};
I had it suddenly happen to me,
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'style.css': 'style.scss'
},
options: {
includePaths: ['css/'],
outputStyle: 'nested'
}
}
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('sass', ['sass']);
};
Make sure the loadNpmTasks and registerTask commands are inside the module.export, if they're outside of the scope of that closure grunt won't be defined, so it fails
Not entirely sure why, but this resolved that issue:
'use strict';
module.exports = function(grunt){
};
I too saw many "grunt not defined" error messages on my terminal.
I grabbed another gruntfile.js from the same directory where I had Node and NPM installed, and replaced the boilerplate gruntfile.js with the other gruntfile.js.
Now, I call Grunt and it works.
I had trailing commas in my gruntfile code which was throwing that error. Thank you ReSharper. Hope this helps someone.
pkg: grunt.file.readJSON('package.json'),
ngAnnotate: {
options: {
singleQuotes: true
},
FFApp: {
files: {
'Scripts/Angular-Annotated/Annotated.js': ['Scripts/Angular/**/*js']
}
, (< deleted this)
}
,(< and this one)
},