Related
I have several files in my LESS folder with a underscore before the file name. Example:
_variables.less
_colors.less
These files only store data used on other .less files, so they should not have the .css file generated.
Is there any way to set a "ignore" on my gruntfile.js for this kind of file?
Here is my current setup:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
uglify: {
options: {
manage: false
},
my_target: {
files: [{
expand: true,
cwd: 'assets/js',
src: '*.js',
dest: 'assets/js/min'
}]
},
},
less: {
components: {
options: {
imports: {
reference: [
"assets/less/**/*.less",
]
}
},
files: [{
expand: true,
cwd: 'assets/less',
src: [
'input.less'
],
dest: 'assets/css/',
ext: '.css'
}]
}
},
watch: {
styles: {
files: ['assets/less/**/*.less', 'assets/js/*.js'],
tasks: ['less', 'newer:uglify'],
options: {
nospawn: truetasks
}
}
}
});
grunt.loadNpmTasks('assemble-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['less', 'watch', 'newer:uglify']);
};
I am building a jhipster (2.1, not supported anymore), and Grunt build task is supposed to minify everything, but minifies nothing.
I see nothing in dist folder.
Maybe there is something wrong with the gruntfile.js, but I cannot see where it can come from.
If there is anyone familiar with gruntfiles who can help me on this...
Here is the gruntfile I use :
// Generated on 2015-05-27 using generator-jhipster 2.1.1
'use strict';
var fs = require('fs');
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var parseString = require('xml2js').parseString;
// Returns the second occurence of the version number
var parseVersionFromPomXml = function() {
var version;
var pomXml = fs.readFileSync('pom.xml', "utf8");
parseString(pomXml, function (err, result){
version = result.project.version[0];
});
return version;
};
// usemin custom step
var useminAutoprefixer = {
name: 'autoprefixer',
createConfig: require('grunt-usemin/lib/config/cssmin').createConfig // Reuse cssmins createConfig
};
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'src/main/webapp/dist'
},
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
ngconstant: {
files: ['Gruntfile.js', 'pom.xml'],
tasks: ['ngconstant:dev']
},
styles: {
files: ['src/main/webapp/assets/styles/**/*.css']
},
livereload: {
options: {
livereload: 35729
},
files: [
'src/main/webapp/**/*.html',
'src/main/webapp/**/*.json',
'{.tmp/,}src/main/webapp/assets/styles/**/*.css',
'{.tmp/,}src/main/webapp/scripts/**/*.js',
'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
autoprefixer: {
// not used since Uglify task does autoprefixer,
// options: ['last 1 version'],
// dist: {
// files: [{
// expand: true,
// cwd: '.tmp/styles/',
// src: '**/*.css',
// dest: '.tmp/styles/'
// }]
// }
},
wiredep: {
app: {
src: ['src/main/webapp/index.html'],
exclude: [/angular-i18n/, /swagger-ui/]
},
test: {
src: 'src/test/javascript/karma.conf.js',
exclude: [/angular-i18n/, /swagger-ui/, /angular-scenario/],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
},
connect: {
proxies: [
{
context: '/api',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/metrics',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/dump',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/health',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/configprops',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/beans',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
},
{
context: '/api-docs',
host: 'localhost',
port: 8080,
https: false,
changeOrigin: false
}
],
options: {
port: 9000,
// Change this to 'localhost' to deny access to the server from outside.
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'src/main/webapp'
],
middleware: function (connect) {
return [
proxySnippet,
connect.static('.tmp'),
connect.static('src/main/webapp')
];
}
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'src/main/webapp'
]
}
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp'
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'src/main/webapp/scripts/app.js',
'src/main/webapp/scripts/app/**/*.js',
'src/main/webapp/scripts/components/**/*.js'
]
},
coffee: {
options: {
sourceMap: true,
sourceRoot: ''
},
dist: {
files: [{
expand: true,
cwd: 'src/main/webapp/scripts',
src: ['scripts/app/**/*.coffee', 'scripts/components/**/*.coffee'],
dest: '.tmp/scripts',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '**/*.coffee',
dest: '.tmp/spec',
ext: '.js'
}]
}
},
concat: {
// not used since Uglify task does concat,
// but still available if needed
// dist: {}
},
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/**/*.js',
'<%= yeoman.dist %>/assets/styles/**/*.css',
'<%= yeoman.dist %>/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/assets/fonts/*'
]
}
}
},
useminPrepare: {
html: 'src/main/webapp/**/*.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin', useminAutoprefixer] // Let cssmin concat files so it corrects relative paths to fonts and images
},
post: {}
}
}
}
},
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/assets/styles/**/*.css'],
js: ['<%= yeoman.dist %>/scripts/**/*.js'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/assets/styles', '<%= yeoman.dist %>/assets/images', '<%= yeoman.dist %>/assets/fonts'],
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
},
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'src/main/webapp/assets/images',
src: '**/*.{jpg,jpeg}', // we don't optimize PNG files as it doesn't work on Linux. If you are not on Linux, feel free to use '**/*.{png,jpg,jpeg}'
dest: '<%= yeoman.dist %>/assets/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: 'src/main/webapp/assets/images',
src: '**/*.svg',
dest: '<%= yeoman.dist %>/assets/images'
}]
}
},
cssmin: {
// By default, your `index.html` <!-- Usemin Block --> will take care of
// minification. This option is pre-configured if you do not wish to use
// Usemin blocks.
// dist: {
// files: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/**/*.css',
// 'styles/**/*.css'
// ]
// }
// }
options: {
root: 'src/main/webapp' // Replace relative paths for static resources with absolute path
}
},
ngtemplates: {
dist: {
cwd: 'src/main/webapp',
src: ['scripts/app/**/*.html', 'scripts/components/**/*.html',],
dest: '.tmp/templates/templates.js',
options: {
module: 'myApp',
usemin: 'scripts/app.js',
htmlmin: {
removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
collapseWhitespace: true,
collapseBooleanAttributes: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true
}
}
}
},
htmlmin: {
dist: {
options: {
removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
collapseWhitespace: true,
collapseBooleanAttributes: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
keepClosingSlash: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// Put files not handled in other tasks here
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: 'src/main/webapp',
dest: '<%= yeoman.dist %>',
src: [
'*.html',
'scripts/**/*.html',
'assets/images/**/*.{png,gif,webp}',
'assets/fonts/*'
]
}, {
expand: true,
cwd: '.tmp/assets/images',
dest: '<%= yeoman.dist %>/assets/images',
src: [
'generated/*'
]
}]
},
generateHerokuDirectory: {
expand: true,
dest: 'deploy/heroku',
src: [
'pom.xml',
'src/main/**'
]
},
generateOpenshiftDirectory: {
expand: true,
dest: 'deploy/openshift',
src: [
'pom.xml',
'src/main/**'
]
}
},
concurrent: {
server: [
],
test: [
],
dist: [
'imagemin',
'svgmin'
]
},
karma: {
unit: {
configFile: 'src/test/javascript/karma.conf.js',
singleRun: true
}
},
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},
buildcontrol: {
options: {
commit: true,
push: false,
connectCommits: false,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
heroku: {
options: {
dir: 'deploy/heroku',
remote: 'heroku',
branch: 'master'
}
},
openshift: {
options: {
dir: 'deploy/openshift',
remote: 'openshift',
branch: 'master'
}
}
},
ngconstant: {
options: {
name: 'myApp',
deps: false,
wrap: '"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GRUNT TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}'
},
dev: {
options: {
dest: 'src/main/webapp/scripts/app/app.constants.js',
},
constants: {
ENV: 'dev',
VERSION: parseVersionFromPomXml()
}
},
prod: {
options: {
dest: '.tmp/scripts/app/app.constants.js',
},
constants: {
ENV: 'prod',
VERSION: parseVersionFromPomXml()
}
}
}
});
grunt.registerTask('serve', [
'clean:server',
'wiredep',
'ngconstant:dev',
'concurrent:server',
'configureProxies',
'connect:livereload',
'watch'
]);
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', [
'clean:server',
'wiredep:test',
'ngconstant:dev',
'concurrent:test',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'wiredep:app',
'ngconstant:prod',
'useminPrepare',
'ngtemplates',
'concurrent:dist',
'concat',
'copy:dist',
'ngAnnotate',
'cssmin',
'autoprefixer',
'uglify',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('buildHeroku', [
'test',
'build',
'copy:generateHerokuDirectory',
]);
grunt.registerTask('deployHeroku', [
'test',
'build',
'copy:generateHerokuDirectory',
'buildcontrol:heroku'
]);
grunt.registerTask('buildOpenshift', [
'test',
'build',
'copy:generateOpenshiftDirectory',
]);
grunt.registerTask('deployOpenshift', [
'test',
'build',
'copy:generateOpenshiftDirectory',
'buildcontrol:openshift'
]);
grunt.registerTask('default', [
'test',
'build'
]);
};
I am getting logs like :
[1mRegistering "grunt-contrib-cssmin" local Npm module tasks.[22m
Reading /home/myapp/dev/workspace/myapp_gulp/node_modules/grunt-contrib-cssmin/package.json...[32mOK[39m
Parsing /home/myapp/dev/workspace/myapp_gulp/node_modules/grunt-contrib-cssmin/package.json...[32mOK[39m
Loading "cssmin.js" tasks...[32mOK[39m
+ [36mcssmin[39m
[1mRegistering "grunt-contrib-htmlmin" local Npm module tasks.[22m
Reading /home/myapp/dev/workspace/myapp_gulp/node_modules/grunt-contrib-htmlmin/package.json...[32mOK[39m
Parsing /home/myapp/dev/workspace/myapp_gulp/node_modules/grunt-contrib-htmlmin/package.json...[32mOK[39m
Loading "htmlmin.js" tasks...[32mOK[39m
+ [36mhtmlmin[39m
everything seems to work right when I run "grunt serve" in my Yeoman generated webapp and I see my scss files compiled in the .tmp folder, but when I run "grunt build" my css file is available in the dist folder with nothing in it.
I have got those two empty files
main.d41d8cd9.css
vendor.d41d8cd9.css
any suggestion is appreciated!!
my Gruntfile.js
// Generated on 2015-11-25 using
// generator-webapp 1.0.1
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all subfolders, use:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
// Configurable paths
var config = {
app: 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
babel: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['babel:dist']
},
babelTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['babel:test', 'test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass:server', 'postcss']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'postcss']
}
},
browserSync: {
options: {
notify: false,
background: true
},
livereload: {
options: {
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*',
'.tmp/scripts/{,*/}*.js'
],
port: 9000,
server: {
baseDir: ['.tmp', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
test: {
options: {
port: 9001,
open: false,
logLevel: 'silent',
host: 'localhost',
server: {
baseDir: ['.tmp', './test', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
dist: {
options: {
background: false,
server: '<%= config.dist %>'
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
eslint: {
target: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= browserSync.test.options.host %>:<%= browserSync.test.options.port %>/index.html']
}
}
},
// Compiles ES6 with Babel
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/scripts',
src: '{,*/}*.js',
dest: '.tmp/scripts',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.js',
dest: '.tmp/spec',
ext: '.js'
}]
}
},
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true,
sourceMapContents: true,
includePaths: ['.']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
postcss: {
options: {
map: true,
processors: [
// Add vendor prefixed styles
require('autoprefixer-core')({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
})
]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
wiredep: {
app: {
src: ['<%= config.app %>/index.html'],
exclude: ['bootstrap.js'],
ignorePath: /^(\.\.\/)*\.\./
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /^(\.\.\/)+/
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
// true would impact styles with attribute selectors
removeRedundantAttributes: false,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care
// of minification. These next options are pre-configured if you do not
// wish to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
dot: true,
cwd: '.',
src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*',
dest: '<%= config.dist %>'
}]
}
},
// Generates a custom Modernizr build that includes only the tests you
// reference in your app
modernizr: {
dist: {
devFile: 'bower_components/modernizr/modernizr.js',
outputFile: '<%= config.dist %>/scripts/vendor/modernizr.js',
files: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'!<%= config.dist %>/scripts/vendor/*'
]
},
uglify: true
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'babel:dist',
'sass:server'
],
test: [
'babel'
],
dist: [
'babel',
'sass',
'imagemin',
'svgmin'
]
},
buildcontrol: {
options: {
dir: 'dist',
commit: true,
push: true,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
/* pages: {
options: {
remote: 'git#github.com:example_user/example_webapp.git',
branch: 'gh-pages'
}
},
heroku: {
options: {
remote: 'git#heroku.com:example-heroku-webapp-1988.git',
branch: 'master'
}
},
myServer: {
options: {
remote: '{{ myServer }}',
branch: 'master'
}
}, */
local: {
options: {
remote: '../',
branch: 'build'
}
}
}
});
grunt.loadNpmTasks('grunt-build-control');
grunt.registerTask('serve', 'start the server and preview your app', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'browserSync:dist']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'postcss',
'browserSync:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'postcss'
]);
}
grunt.task.run([
'browserSync:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
//'concat',
'cssmin',
'uglify',
'copy:dist',
'modernizr',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:eslint',
'test',
'build'
]);
};
I see concat task comments in grunt.registerTask() , try to run again grunt build by uncommenting that. Hopefully it will work .
I have project that started with yeoman webapp generator with out compass support.
Now i need to integrate some less files (Not bootstrap) to my app. I need to add them to grunt to compile them and minify in distribution. Is there any proper way to edit gruntfile to achieve this this?
My GruntFile is looks like
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// If you want to recursively match all subfolders, use:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
// Configurable paths
var config = {
app: 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
config: config,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
babel: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['babel:dist']
},
babelTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['babel:test', 'test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass:server', 'postcss']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'postcss']
}
},
browserSync: {
options: {
notify: false,
background: true
},
livereload: {
options: {
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*',
'.tmp/scripts/{,*/}*.js'
],
port: 9000,
server: {
baseDir: ['.tmp', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
test: {
options: {
port: 9001,
open: false,
logLevel: 'silent',
host: 'localhost',
server: {
baseDir: ['.tmp', './test', config.app],
routes: {
'/bower_components': './bower_components'
}
}
}
},
dist: {
options: {
background: false,
server: '<%= config.dist %>'
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
eslint: {
target: [
'Gruntfile.js',
'<%= config.app %>/scripts/{,*/}*.js',
'!<%= config.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Mocha testing framework configuration options
mocha: {
all: {
options: {
run: true,
urls: ['http://<%= browserSync.test.options.host %>:<%= browserSync.test.options.port %>/index.html']
}
}
},
// Compiles ES6 with Babel
babel: {
options: {
sourceMap: true
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/scripts',
src: '{,*/}*.js',
dest: '.tmp/scripts',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.js',
dest: '.tmp/spec',
ext: '.js'
}]
}
},
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true,
sourceMapContents: true,
includePaths: ['.']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
postcss: {
options: {
map: true,
processors: [
// Add vendor prefixed styles
require('autoprefixer-core')({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
})
]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
wiredep: {
app: {
src: ['<%= config.app %>/index.html'],
exclude: ['bootstrap.js'],
ignorePath: /^(\.\.\/)*\.\./
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /^(\.\.\/)+/
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= config.dist %>/scripts/{,*/}*.js',
'<%= config.dist %>/styles/{,*/}*.css',
'<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/styles/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
// true would impact styles with attribute selectors
removeRedundantAttributes: false,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care
// of minification. These next options are pre-configured if you do not
// wish to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= config.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= config.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= config.dist %>/scripts/scripts.js': [
// '<%= config.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'*.{ico,png,txt}',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
dot: true,
cwd: '.',
src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*',
dest: '<%= config.dist %>'
}]
}
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'babel:dist',
'sass:server'
],
test: [
'babel'
],
dist: [
'babel',
'sass',
'imagemin',
'svgmin'
]
}
});
grunt.registerTask('serve', 'start the server and preview your app', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'browserSync:dist']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'postcss',
'browserSync:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run([target ? ('serve:' + target) : 'serve']);
});
grunt.registerTask('test', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'postcss'
]);
}
grunt.task.run([
'browserSync:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
'concat',
'cssmin',
'uglify',
'copy:dist',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:eslint',
'test',
'build'
]);
};
You will need to install the grunt-contrib-less task and then add the configuration similar to the following, to your gruntfile.js.
less: {
development: {
options: {
paths: ["assets/css"]
},
files: {
"path/to/result.css": "path/to/source.less"
}
}
}
To then minify your css, take a look at grunt-contrib-cssmin which you can configure something like:
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'output.css': ['foo.css', 'bar.css']
}
}
}
To load these tasks add:
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
and if you want to have them both run under one task:
grunt.registerTask('lessmin', ['less', 'cssmin']);
Which you can run from the command line with:
grunt lessmin
I need to be able to run multiple tasks of the same type of task within Grunt (grunt-contrib-concat). I've tried a couple of things below but neither work. Any ideas on how to do this are appreciated.
concat: {
dist: {
src: [
'js/foo1/bar1.js',
'js/foo1/bar2.js'
],
dest: 'js/foo1.js',
src: [
'js/foo2/bar1.js',
'js/foo2/bar2.js'
],
dest: 'js/foo2.js'
}
}
and..
concat: {
dist: {
src: [
'js/foo1/bar1.js',
'js/foo1/bar2.js'
],
dest: 'js/foo1.js'
}
},
concat: {
dist: {
src: [
'js/foo2/bar1.js',
'js/foo2/bar2.js'
],
dest: 'js/foo2.js'
}
}
and..
concat: {
dist: {
src: [
'js/foo1/bar1.js',
'js/foo1/bar2.js'
],
dest: 'js/foo1.js'
},
dist: {
src: [
'js/foo2/bar1.js',
'js/foo2/bar2.js'
],
dest: 'js/foo2.js'
}
}
First define two targets for the task:
concat: {
dist1: {
src: [
'js/foo1/bar1.js',
'js/foo1/bar2.js'
],
dest: 'js/foo1.js'
},
dist2: {
src: [
'js/foo2/bar1.js',
'js/foo2/bar2.js'
],
dest: 'js/foo2.js'
}
}
Then register a new task that runs both:
grunt.registerTask('dist', ['concat:dist1', 'concat:dist2']);
Then run using
grunt dist