I have a very annoying problem with gruntjs and grunt-contrib-watch plugin. After some time, I can not define, it may be half an hour or two hours of work (it's random) the console spits out this error:
Running "watch" task
Waiting...Warning: EPERM, operation not permitted 'C:\dev\project\app\index.html~RF97bf99.TMP'
it repeats ~50 times, and next this:
Warning: An error occurred while processing a template (An error occurred while processing a templat
e (Maximum call stack size exceeded).).
Warning: An error occurred while processing a template (An error occurred while processing a templat
e (An error occurred while processing a template (Maximum call stack size exceeded).).).
Warning: An error occurred while processing a template (An error occurred while processing a templat
e (An error occurred while processing a template (An error occurred while processing a template (Max
imum call stack size exceeded).).).).
Warning: An error occurred while processing a template (An error occurred while processing a templat
e (An error occurred while processing a template (An error occurred while processing a template (An
error occurred while processing a template (Maximum call stack size exceeded).).).).).
My Grunfile.js:
'use strict';
module.exports = function (grunt) {
// Load all grunt tasks
require('load-grunt-tasks')(grunt);
// Show elapsed time at the end
require('time-grunt')(grunt);
grunt.initConfig({
// Project settings
project: {
app: 'app',
dist: 'dist'
},
bootstrap: {
src: 'bower_components/sass-bootstrap',
pkg: grunt.file.readJSON('bower_components/sass-bootstrap/package.json'),
banner: '/*!\n' +
' * Bootstrap v<%= bootstrap.pkg.version %> by #fat and #mdo\n' +
' * Copyright <%= grunt.template.today("yyyy") %> <%= bootstrap.pkg.author %>\n' +
' * Licensed under <%= _.pluck(bootstrap.pkg.licenses, "url").join(", ") %>\n' +
' *\n' +
' * Designed and built with all the love in the world by #mdo and #fat.\n' +
' */\n\n',
jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n'
},
watch: {
sass: {
files: ['<%= project.app %>/sass/{,*/}*.scss'],
tasks: ['sass:dev', 'autoprefixer'],
options: {
spawn: false,
livereload: true
},
},
js: {
files: [
'<%= project.app %>/js/{,*/}*.js',
'!<%= project.app %>/js/vendor/{,*/}*.js',
'!<%= project.app %>/js/plugins/{,*/}*.js'
],
options: {
livereload: true
}
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= project.app %>/{,*/}*.html',
'<%= project.app %>/css/{,*/}*.css',
'<%= project.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
]
}
},
connect: {
options: {
port: 9000,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: '<%= project.app %>'
}
},
dist: {
options: {
open: true,
base: '<%= project.dist %>',
livereload: false
}
}
},
sass: {
options: {
includePaths: ['<%= bootstrap.src %>/lib/']
},
dev: {
files: {
'<%= project.app %>/css/app.css': '<%= project.app %>/sass/app.scss'
}
},
dist: {
files: {
'<%= project.app %>/css/app.css': '<%= project.app %>/sass/app.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
dist: {
files: [{
expand: true,
cwd: '<%= project.app %>/css/',
src: '{,*/}*.css',
dest: '<%= project.app %>/css/'
}]
}
},
concat: {
options: {
nonull: true,
separator: '\n\n'
},
bootstrap: {
options: {
banner: '<%= bootstrap.banner %><%= bootstrap.jqueryCheck %>'
},
src: [
'<%= bootstrap.src %>/js/transition.js',
// '<%= bootstrap.src %>/js/alert.js',
// '<%= bootstrap.src %>/js/button.js',
// '<%= bootstrap.src %>/js/carousel.js',
'<%= bootstrap.src %>/js/collapse.js',
'<%= bootstrap.src %>/js/dropdown.js',
// '<%= bootstrap.src %>/js/modal.js',
// '<%= bootstrap.src %>/js/tooltip.js',
// '<%= bootstrap.src %>/js/popover.js',
// '<%= bootstrap.src %>/js/scrollspy.js',
// '<%= bootstrap.src %>/js/tab.js',
// '<%= bootstrap.src %>/js/affix.js'
],
dest: '<%= project.app %>/js/plugins/bootstrap.js'
},
plugins: {
files: {
'<%= project.app %>/js/plugins.js': ['<%= project.app %>/js/plugins/bootstrap.min.js', '<%= project.app %>/js/plugins/*.min.js']
}
}
},
uglify: {
bootstrap: {
options: {
banner: '<%= bootstrap.banner %>'
},
files: {
'<%= project.app %>/js/plugins/bootstrap.min.js': '<%= concat.bootstrap.dest %>'
}
},
all: {
options: {
preserveComments: 'some',
report: 'min'
},
files: [{
expand: true,
cwd: '<%= project.app %>/js/',
src: ['*.js', '!plugins.js'],
ext: '.min.js',
dest: '<%= project.app %>/js/'
}]
}
},
cssmin: {
options: {
report: 'min'
},
dist: {
expand: true,
cwd: '<%= project.app %>/css/',
src: ['*.css', '!*.min.css'],
dest: '<%= cssmin.dist.cwd %>',
ext: '.min.css'
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= project.app %>/img',
src: ['{,*/}*.{gif,jpeg,jpg,png}'],
dest: '<%= project.dist %>/img'
}]
}
}
});
// Register tasks
// ==================================================
// Run local server
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'connect:livereload',
'watch'
]);
});
// Build JS
grunt.registerTask('build-js', [
'concat:bootstrap',
'uglify',
'concat:plugins'
]);
// Build CSS
grunt.registerTask('build-css', [
'sass:dist',
'autoprefixer',
'cssmin'
]);
// Minify images
grunt.registerTask('test', ['imagemin']);
// grunt.registerTask('default', ['']);
};
package.json (all dependencies are up to date):
{
"name": "project",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"load-grunt-tasks": "~0.2.1",
"time-grunt": "~0.2.6",
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "~0.6.0",
"grunt-autoprefixer": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-sass": "~0.9.0",
"jpegtran-bin": "~0.2.0",
"grunt-contrib-imagemin": "~0.4.0"
}
}
I'm on Windows 7 32-bit, gruntjs v.0.4.2, nodejs v0.10.22. Any ideas what may causes this problem? And how would I fix it? Thanks a lot.
I had a similar problem "EPERM, operation not permitted..." and it was because i didn't opened the CMD in administrator mode.
So right click on CMD and run as administrator.
This solved my error.
I'm not familiar with this problem, but I think it might have something to do with the way you're using wildcards on your Gruntfile.js. A co-worker once complained that his watch task was taking an incredible amount of time to run, up to 3-4 minutes a time. He was using the syntax:
/css/{,*/}*.css
I didn't have that problem, so while making his Gruntfile.js more like mine, we found out that using:
/css/**/*.css
...solved the whole problem! All his tasks ran at less than 10 seconds.
I have made changes to your Gruntfile.js, you might want to use a diff tool to compare my version to yours and see what was changed.
I would also strongly recommend using jshint to lint the JavaScript in your project, specially the Gruntfile.js and any other configuration file important to Grunt you might have detached from your Gruntfile.js. An example here (look around the same project for more detail).
'use strict';
module.exports = function (grunt) {
// Load all grunt tasks
require('load-grunt-tasks')(grunt);
// Show elapsed time at the end
require('time-grunt')(grunt);
grunt.initConfig({
// Project settings
project: {
app: 'app',
dist: 'dist'
},
bootstrap: {
src: 'bower_components/sass-bootstrap',
pkg: grunt.file.readJSON('bower_components/sass-bootstrap/package.json'),
banner: '/*!\n' +
' * Bootstrap v<%= bootstrap.pkg.version %> by #fat and #mdo\n' +
' * Copyright <%= grunt.template.today("yyyy") %> <%= bootstrap.pkg.author %>\n' +
' * Licensed under <%= _.pluck(bootstrap.pkg.licenses, "url").join(", ") %>\n' +
' *\n' +
' * Designed and built with all the love in the world by #mdo and #fat.\n' +
' */\n\n',
jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n'
},
watch: {
sass: {
files: ['<%= project.app %>/sass/**/*.scss'],
tasks: ['sass:dev', 'autoprefixer'],
options: {
spawn: false,
livereload: true
},
},
js: {
files: [
'<%= project.app %>/js/**/*.js',
'!<%= project.app %>/js/vendor/**/*.js',
'!<%= project.app %>/js/plugins/**/*.js'
],
options: {
livereload: true
}
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= project.app %>/**/*.html',
'<%= project.app %>/css/**/*.css',
'<%= project.app %>/images/**/*.{gif,jpeg,jpg,png,svg,webp}'
]
}
},
connect: {
options: {
port: 9000,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: '<%= project.app %>'
}
},
dist: {
options: {
open: true,
base: '<%= project.dist %>',
livereload: false
}
}
},
sass: {
options: {
includePaths: ['<%= bootstrap.src %>/lib/']
},
dev: {
files: {
'<%= project.app %>/css/app.css': '<%= project.app %>/sass/app.scss'
}
},
dist: {
files: {
'<%= project.app %>/css/app.css': '<%= project.app %>/sass/app.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 version']
},
dist: {
files: [{
expand: true,
cwd: '<%= project.app %>/css',
src: '/**/*.css',
dest: '<%= project.app %>/css'
}]
}
},
concat: {
options: {
nonull: true,
separator: '\n\n'
},
bootstrap: {
options: {
banner: '<%= bootstrap.banner %><%= bootstrap.jqueryCheck %>'
},
src: [
'<%= bootstrap.src %>/js/transition.js',
// '<%= bootstrap.src %>/js/alert.js',
// '<%= bootstrap.src %>/js/button.js',
// '<%= bootstrap.src %>/js/carousel.js',
'<%= bootstrap.src %>/js/collapse.js',
'<%= bootstrap.src %>/js/dropdown.js'
// '<%= bootstrap.src %>/js/modal.js',
// '<%= bootstrap.src %>/js/tooltip.js',
// '<%= bootstrap.src %>/js/popover.js',
// '<%= bootstrap.src %>/js/scrollspy.js',
// '<%= bootstrap.src %>/js/tab.js',
// '<%= bootstrap.src %>/js/affix.js'
],
dest: '<%= project.app %>/js/plugins/bootstrap.js'
},
plugins: {
files: {
'<%= project.app %>/js/plugins.js': ['<%= project.app %>/js/plugins/bootstrap.min.js', '<%= project.app %>/js/plugins/*.min.js']
}
}
},
uglify: {
bootstrap: {
options: {
banner: '<%= bootstrap.banner %>'
},
files: {
'<%= project.app %>/js/plugins/bootstrap.min.js': '<%= concat.bootstrap.dest %>'
}
},
all: {
options: {
preserveComments: 'some',
report: 'min'
},
files: [{
expand: true,
cwd: '<%= project.app %>/js/',
src: ['*.js', '!plugins.js'],
ext: '.min.js',
dest: '<%= project.app %>/js/'
}]
}
},
cssmin: {
options: {
report: 'min'
},
dist: {
expand: true,
cwd: '<%= project.app %>/css/',
src: ['*.css', '!*.min.css'],
dest: '<%= cssmin.dist.cwd %>',
ext: '.min.css'
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= project.app %>/img',
src: ['/**/*.{gif,jpeg,jpg,png}'],
dest: '<%= project.dist %>/img'
}]
}
}
});
// Register tasks
// ==================================================
// Run local server
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'connect:livereload',
'watch'
]);
});
// Build JS
grunt.registerTask('build-js', [
'concat:bootstrap',
'uglify',
'concat:plugins'
]);
// Build CSS
grunt.registerTask('build-css', [
'sass:dist',
'autoprefixer',
'cssmin'
]);
// Minify images
grunt.registerTask('test', ['imagemin']);
// grunt.registerTask('default', ['']);
};
On linux, change directory permissions
$ sudo chmod -R 777 name_directory
Related
When i run my grunt server with task "grunt server:dist --force" i get
Running "configureProxies" task
Proxy created for: /securedGateway to 104.92.356.167:80
And when i load my page i get 404 on all rest calls. I have done proxy using nginx server it works fine but using grunt for proxy task doesn't seems to be working for me.
here is my grunt file: -
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
// configurable paths
var yeomanConfig={
app: 'app',
dist: 'dist'
// dist: '/c/eclipse-jee/eclipse/workspace/bo/WebContent/mybo'
}
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: yeomanConfig,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bowerInstall']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: true
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
less: {
files: ['<%= yeoman.app %>/assets/less/*.less'],
tasks: ['less:server']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/assets/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
proxies: [
{
context: "/securedGateway",
host: '104.238.94.167',
port: 80,
https: false,
changeOrigin: true,
headers: {
'host': '104.238.94.167'
},
}],
// courtesy of Phubase Tiewthanom
livereload: {
options: {
open:true,
base: [
'.tmp',
yeomanConfig.app
],
middleware: function (connect) {
return [proxySnippet,
connect.static(require('path').resolve('app')),
connect.static(require('path').resolve('.tmp')),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(require('./bower.json').appPath || 'app')
];
}
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>'
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
],
test: {
options: {
jshintrc: 'test/.jshintrc'
},
src: ['test/spec/{,*/}*.js']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/assets/css/',
src: '{,*/}*.css',
dest: '.tmp/assets/css/'
}]
}
},
// Automatically inject Bower components into the app
bowerInstall: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/',
exclude: ['requirejs',
'mocha',
'jquery.vmap.europe.js',
'jquery.vmap.usa.js',
'Chart.min.js',
'raphael',
'morris',
// 'jquery.inputmask',inputmask
'jquery.validate.js',
'jquery.stepy.js'
]
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/assets/css/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
// 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: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
//js: ['concat', 'uglifyjs'],
js: ['concat'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/assets/css/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>']
}
},
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
// root: '<%= yeoman.app %>',
relativeTo: '<%= yeoman.app %>',
processImport: true,
noAdvanced: true
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'views/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// ngmin tries to make the code safe for minification automatically by
// using the Angular long form for dependency injection. It doesn't work on
// things like resolve or inject so those have to be done manually.
ngmin: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
// 'views/*/{,*/}*.html',
'views/**',
'images/{,*/}*.{webp}',
'fonts/*',
'assets/**',
'bower_components/**',
'styles/main.css',
// 'bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/jqvmap/jqvmap/maps/jquery.vmap.europe.js',
'bower_components/jqvmap/jqvmap/maps/jquery.vmap.usa.js',
'bower_components/stepy/lib/jquery.stepy.js',
'bower_components/Chart.js/Chart.min.js',
'bower_components/raphael/raphael.js',
'bower_components/morris.js/morris.js'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}]
},
tomcatServer: {
cwd: '<%= yeoman.dist %>',
src: '**/*',
dest: '<%= yeoman.tomcatServer %>',
expand: true
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/assets/css',
dest: '.tmp/assets/css',
src: '{,*/}*.css'
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'copy:styles',
'imagemin',
'svgmin'
]
},
ngtemplates: {
app: {
src: 'app/views/templates/**.html',
dest: 'app/scripts/templates/templates.js',
options: {
url: function(url) { return url.replace('app/views/', ''); },
bootstrap: function(module, script) {
return "angular.module('theme.templates', []).run(['$templateCache', function ($templateCache) {\n"+script+"}])";
}
},
}
},
less: {
server: {
options: {
// strictMath: true,
dumpLineNumbers: true,
sourceMap: true,
sourceMapRootpath: "",
outputSourceFiles: true
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/assets/less",
src: "styles.less",
dest: ".tmp/assets/css",
ext: ".css"
}
]
},
dist: {
options: {
cleancss: true,
report: 'min'
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/assets/less",
src: "styles.less",
dest: ".tmp/assets/css",
ext: ".css"
}
]
}
},
// 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: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= yeoman.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= yeoman.dist %>/scripts/scripts.js': [
// '<%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
processhtml: {
options: {
commentMarker: 'prochtml',
process: true
},
dist: {
files: {
'<%= yeoman.dist %>/index.html': ['<%= yeoman.dist %>/index.html']
}
}
},
uglify: {
options: {
mangle: false
}
}
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'bowerInstall',
'concurrent:server',
'autoprefixer',
'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(['serve:' + target]);
});
grunt.registerTask('test', [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'bowerInstall',
'ngtemplates',
'useminPrepare',
'concurrent:dist',
'less:dist',
'autoprefixer',
'concat',
'configureProxies',
// 'ngmin',
'copy:dist',
// 'cdnify',
'cssmin',
//'uglify',
'rev',
'usemin',
'processhtml:dist',
// 'htmlmin'
]);
grunt.registerTask('default', [
// 'newer:jshint',
// 'test',
'build'
]);
};
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 am on CentOS and working on a node.js - angular.js project and I have setup node to keep running in background even when logged out from the terminal, using forever module.
I want to do the same for the frontend so it keeps running in the background. I am using Yoeman in the frontend and so far I have been launching the frontend using the command grunt serve.
I installed module grunt-forever but I am having issue configuring it.
After referring to the docs, I added:
grunt.loadNpmTasks('grunt-forever');
at the beginning of the module.exports block and the following config at the bottom of the module.exports code block:
forever: {
lorem-server: {
options: {
index: 'app/app.js',
logDir: 'logs'
}
}
}
When I did grunt test, I got:
root#mail [417 03:12:25 /projects/lorem/client]# grunt test
/projects/lorem/client/Gruntfile.js:481
lorem-server: {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "test" not found. Use --force to continue.
Aborted due to warnings.
I still went ahead and did grunt forever:lorem-server:start, but got the same error.
Here is my complete Gruntfile.js:
// Generated on 2015-05-04 using generator-angular 0.11.1
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-forever');
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Configurable paths for the application
var appConfig = {
app: require('./bower.json').appPath || 'app',
dist: 'dist'
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: appConfig,
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
];
}
}
},
dist: {
options: {
open: true,
base: '<%= yeoman.dist %>'
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
},
test: {
options: {
jshintrc: 'test/.jshintrc'
},
src: ['test/spec/{,*/}*.js']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/{,*/}*',
'!<%= yeoman.dist %>/.git{,*/}*'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
server: {
options: {
map: true,
},
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
test: {
devDependencies: true,
src: '<%= karma.unit.configFile %>',
ignorePath: /\.\.\//,
fileTypes:{
js: {
block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
sourcemap: true
}
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
// 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: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
]
}
},
// The following *-min tasks will produce minified files in the dist folder
// 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: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= yeoman.dist %>/scripts/scripts.js': [
// '<%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html', 'views/{,*/}*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// ng-annotate tries to make the code safe for minification automatically
// by using the Angular long form for dependency injection.
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'test/karma.conf.js',
singleRun: true
}
}
});
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve:' + target]);
});
grunt.registerTask('test', [
'clean:server',
'wiredep',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
forever: {
loremserver: {
options: {
index: 'app/app.js',
logDir: 'logs'
}
}
}
};
What am I doing wrong here? Can someone please point me in the right direction?
Your declaration is invalid, dash symbol interrupts the property name; try quotes to explicitly say the property name
"lorem-server":
Also you must put your code inside of initconfig, e.g.
grunt.initConfig({
forever: {
loremserver: {
options: {
index: 'app/app.js',
logDir: 'logs'
}
}
},
// Project settings
yeoman: appConfig,
I scaffolded my project with the standard Yeoman Webapp generator, with SASS, Bootstrap, Modernizr, and HTML5 Boilerplate. My project gets scaffolded successfully and running "Grunt serve" opens the page w/ the Grunt server instance.
In order to run Apache (for PHP), I tried using "grunt watch" rather than "grunt serve" and running apache. When navigating to my project over an Apache server instance, I get the page without any markup applied--Grunt doesn't seem to be compiling the scss to css.
So, I'm looking for a way to be able to take advantage of Grunt for minifying/compiling SASS/Lint/etc, while being able to run Apache so I can work on the server-side part of my application. I'm brand new to Yeoman/Grunt, so I'm unsure if what I'm trying is even how I should go about this. Any help would be much appreciated.
// Generated on 2014-08-11 using generator-webapp 0.4.9
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// 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: ['bowerInstall']
},
js: {
files: ['<%= config.app %>/scripts/{,*/}*.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
jstest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass:server', 'autoprefixer']
},
styles: {
files: ['<%= config.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= config.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= config.app %>/images/{,*/}*'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
// 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
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'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://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
}
}
},
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
loadPath: [
'bower_components'
]
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.scss'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.scss'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
bowerInstall: {
app: {
src: ['<%= config.app %>/index.html'],
exclude: ['bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js']
},
sass: {
src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}']
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
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']
},
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,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
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}',
'.htaccess',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}, {
expand: true,
dot: true,
cwd: '.',
src: ['bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/*.*'],
dest: '<%= config.dist %>'
}]
},
styles: {
expand: true,
dot: true,
cwd: '<%= config.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// 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: [
'sass:server',
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'sass',
'copy:styles',
'imagemin',
'svgmin'
]
}
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer',
'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', function (target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer'
]);
}
grunt.task.run([
'connect:test',
'mocha'
]);
});
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'cssmin',
'uglify',
'copy:dist',
'modernizr',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
The watch task you are running is running the sass:server task. This is outputting to dest: '.tmp/styles',. I would imagine this is where your problem lies.
Try setting up a new subtask within watch called apache for example, then configure it to output to an assets folder which you can then load in your template.
Example task:
sass: {
apache: {
files: {
"public/css/style.css": "assets/sass/style.scss"
}
},
}
Then run the sass:apache tas
watch: {
sass: {
files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['sass:apache', 'autoprefixer']
},
}
You will need to tweak the tasks with the options you want etc but hopefully this will help you get the basic idea.