Creating a grunt file for an angular app - gruntjs

My directory structure looks like below:
--myapp/
--client/
--build/
--css/
--js/
--angular/ #angular libraries here
--angular.js
--angular-resource.js
--angular-ui-router.js
--jquery/ #jquery libraries here
--jquery.js
--app.js
--index.html
--server/ #All server related files here
--Gruntfile.js
My Grunt file so far looks like this
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
dist: {
src: ['client/js/angular/*.*]
dest: 'client/build/angular-build.js'
}
}
});
};
This is as far as I have gotten. Don't see any easy grunt file tutorials on this.
Th ouput I am looking for is all angular libraries in one output file. All jquery libraries in another.. all css libraries in third.
How do i achieve this ?

A few things:
You don't know it, but you're using grunt-contrib-concat, so you'd better npm install that and grunt.loadNpmTasks('grunt-contrib-concat'); it.
Concat doesn't support wildcards. This is good, because the order that these files are included is going to matter. angular.js must be included before angular-resource.js
I've included a rough template of what your Gruntfile needs to look like to accomplish this, but know that this is not the right way to do this. You should be loading your dependencies using something like bower and serving them individually, or using something like Browserify or Require.js. You'll come to see the value of that as the project progresses.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
angular: {
src: [
'client/js/angular/angular.js',
'client/js/angular/angular-resource.js',
'client/js/angular/angular-ui-router.js'
]
dest: 'client/build/angular-build.js'
},
jquery: {
src: ['client/js/jquery/jquery.js']
dest: 'client/build/jquery-build.js'
},
...
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};

Related

Include 3rd party css in ionic2

How to include a 3rd party css in ionic2? I guess it is probably linked to webpack config but I can't find any example anywhere, does someone know? for example, adding font-awesome css file after npm install font-awesome
For those who are interested in this, you can just add the files in the build process in the ionic.config.js like:
module.exports = {
...
sass: {
src: [
'app/theme/app.+(ios|md).scss',
'node_modules/font-awesome/scss/font-awesome.scss'
],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/font-awesome/scss'
]
},
fonts: {
src: [
'node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)',
'node_modules/font-awesome/fonts/*.+(ttf|woff|woff2)'
],
dest: 'www/build/fonts'
}
...
}
This will compile font-awesome.css under www/build/css and fonts under www/build/fonts
ionic.config.js has been deprecated.
The correct answer is now:
npm install font-awesome
Then edit your gulpfile.js to add options to the sass and fonts tasks:
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/font-awesome/scss'
]
}
});
});
gulp.task('fonts', function(){
return copyFonts({
src: [
'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'
]
});
});
You can find more information on the gulp tasks here: https://github.com/driftyco/ionic-gulp-tasks.
Then you should be able to #import "font-awesome" in your app/theme/app.core.scss file and use it in your project wherever.
You can normally put css files in the index.html page and just use the css classes wherever you want. By default, your components are not completely isolated from the outside world so you should be able to use lets say bootstrap without any problems

bower_concat yields no output

I'm completely new at Grunt, Bower etc. and have spent the evening playing around with a basic Gruntfile.js that contains the following:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['Gruntfile.js']
},
bower_concat: {
all: {
dest: 'assets/libs/<% pkg.name %>-bower.js',
mainFiles: {
'flux': ['dist/Flux.js']
}
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint', 'bower_concat']);
};
However, when I run grunt bower_concat I get
Running "bower_concat:all" (bower_concat) task
Done, without errors.
but no JavaScript file is outputted in the destination folder (and I've tried running jshint, which does not complain).
I've tried lots of things, from e.g. removing mainFiles to including bowerOptions: { relative: false }.
The structure of my project is
Web
assets
libs
bower_components
flux
node_modules
grunt
grunt-bower_concat
grunt-contrib-jshint
load-grunt-tasks
In the Web folder, I have bower.json, Gruntfile.js and package.json and it's from this folder that I run the command grunt bower_concat.
Does anyone have any idea what I'm doing wrong?

loadPath in Gulp

I've got Bourbon and Neat installed via Bower (in the /bower-components folder) and I was wondering if I am able to call them in my .scss files like so, using Gulp.
#import 'bourbon';
I've just switched over from Grunt and was wondering if Gulp had a similar loadPath option. I'd normally use this to reference that Bower directory in my Gruntfile.js, like below:
sass: {
dist: {
options: {
style: 'expanded',
loadPath: '<%= app %>/bower_components/foundation/scss'
files: {
'<%= app %>/css/app.css': '<%= app %>/scss/app.scss'
}
}
}
Any help with this would be appreciated. Thanks in advance!
I ended up using gulp-ruby-sass, that while is a bit slower than gulp-sass is rich with features, such as loadPath.
Let me show you an example installing bootstrap, Install gulp-ruby-sass but before that make sure you have ruby installed first:
npm install gulp-ruby-sass --save-dev
In gulpfile.js define the process:
var sass = require('gulp-ruby-sass')
gulp.task('processSCSS', function () {
return sass('./path/to/scss/you/mention/#important/main.scss', {
style: 'compressed',
loadPath: [
'./path/to/scss',
'./path/to/bower_component/bootstrap-sass/assets/stylesheets'
]
})
.on('error', sass.logError)
.pipe('./path/to/dest/stylesheets/')
});
In main.scss just call stylesheet:
#import 'bootstrap'

Is it possible with Grunt to merge all js/css files in a specific folder in to one js/css file?

I'm new with Grunt and I wasn't able to find what I'm looking for.
I have this folder's structure configuration :
app/
public/
assets/
... some javascript/css libs like jQuery, Bootstrap, etc
css/
js/
img/
What I'd like to do is compress all the js files in public/assets/ into one assets.js file that would be in js/assets.js, and do the same for all the css files into assets.css in css/assets.css.
Moreover, I'd like those two assets.js/css file to be compressed.
A link to a solution or some start of a solution is all I need.
Thank you!
Firstly you need to concatenate your files and then run them through a minifier. Grunt has plenty of plugins that will do these things but some of the more popular ones are grunt-contrib-concat, grunt-contrib-uglify and grunt-contrib-cssmin.
These tasks have plenty of options available to taylor them to your needs but this should help you get started.
As sample configuration for the concat task would be something like:
grunt.initConfig({
concat: {
options: {
separator: ';',
},
js: {
src: ['public/assets/a.js', 'public/assets/b.js', 'public/assets/c.js'],
dest: 'public/js/assets.js',
},
js: {
src: ['public/assets/a.css', 'public/assets/b.css', 'public/assets/c.css'],
dest: 'public/css/assets.css',
},
},
});
Then for your minify js task:
uglify: {
js: {
files: {
'public/assets/js/assets.min.js': 'public/assets/js/assets.js'
}
}
}
And finally, css minify task:
cssmin: {
files: {
'public/assets/css/assets.min.css' : 'public/assets/css/assets.css'
}
}

Refresh less css which has other imported less files without page load

I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks
#import "variables";
#import "mixins";
It seems I can not use watch mode in this setting. Is there any other ways?
Upd. This syntax is for old grunt versions so it should not be used.
You need to use LiveReload app for this. Or maybe another software that can reload page with LiveReload browser extension (maybe Sublime Text editor with a plugin).
Possible setup is Node.js with Grunt which has grunt-contrib-less and grunt-reload modules installed.
Your grunt.js config should look like this:
module.exports = function(grunt) {
grunt.initConfig({
// Start LiveReload server
reload: {
port: 35729,
liveReload: {}
},
// Simple css compilation
less: {
src: 'less/app.less',
dest: 'css/app.css'
},
// Reload files on change
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
});
// Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');
// Register default task
grunt.registerTask('default', 'less');
};
Then you need to run
$ grunt watch:less
and
$ grunt watch:reload
in two separate terminal windows.
I'm totally agree with this comment
Refresh less css which has other imported less files without page load .
Thanks, thevasya.
But there's no need to start several terminals.
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
after that you can start watching by
$ grunt watch
and that's it. If you change any less file, it will start only less task.
P.S.: This answer was updated for proper work with grunt 0.4.

Resources