Create multiple grunt task - javascript

watch: {
css: {
files: 'source/styles/**/*.scss',
tasks: ['sass', 'autoprefixer', 'cssmin', 'clean:css'],
options: {
spawn: false,
},
},
images: {
files: 'source/assets/images/**/*.{png,jpg,gif}',
tasks: ['clean:image', 'imagemin'],
options: {
spawn: false,
},
}
}
grunt.registerTask('css', [
'sass',
'cssmin',
'clean:css'
]);
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('default', [
'sass',
'cssmin',
'clean:css',
'requirejs',
'clean:js',
]);
I want to create a new gurnt task. Currenly, In my project, grunt css is working fine to build the complate packae SCSS.
I need to create a new task like grunt home, which will build a specific folder SCSS.
How can I create grunt home?


I think this should work, but i didn't test it (it will compile SCSS files from source/styles/SCSS to css in build/styles/css):
homeSass: {
dist: {
files: [{
expand: true,
src: ['source/styles/SCSS/**/*.scss'],
dest: 'build/styles/css/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('homebuild', [
'homeSass'
]);
Is it your are looking for? Or I misunderstand you?


so something like this you can create multiple tasks
sass2: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],//path to different source file
dest: 'build/styles/',//path to different destination for home
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass2'
]);
Now to run this you have 2 ways
1) simply say grunt home
this will only run sass compilation specific to sass2
2) now if you wants to run both the tasks grunt css and grunt home in 1 go then do this
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/src1.scss', 'source/styles/**/src2.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass'
]);

Related

Grunt compass dev and prod

I have an issue with GruntJS + SASS Compass. I've setup dev and prod configs.
For dev css has outputStyle: 'expanded', for prod has outputStyle: 'compressed'. When I'm doing prod - it works like a charm. In console I see
Running "compass:dist" (compass) task
overwrite css/screen.css (0.392s)
Compilation took 0.4s
css compressed like it should be.
But when I'm doing devit shows in console nothing
Running "compass:dev" (compass) task
Running "autoprefixer:dist" (autoprefixer) task
And css still compressed.
There is my Gruntfile.js config:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: 'sass',
cssDir: 'css',
imagesDir: 'images',
fontsDir: 'fonts',
relativeAssets: true,
boring: true,
outputStyle: 'expanded',
environment: 'development',
raw: 'preferred_syntax = :sass\n'
}
},
dist: {
options: {
sassDir: 'sass',
cssDir: 'css',
imagesDir: 'images',
fontsDir: 'fonts',
relativeAssets: true,
boring: true,
force: true,
bundleExec: true,
outputStyle: 'compressed',
environment: 'production',
raw: 'preferred_syntax = :sass\n'
}
}
},
autoprefixer: {
dist:{
files:{
'css/screen.css':'css/screen.css'
}
}
},
concat: {
dist: {
src: [
'js/vendors/filename.js',
'js/companyname/filename.js'
],
dest: 'js/companyname/main.js'
}
},
jshint: {
all: ['Gruntfile.js'],
beforeconcat: [
'js/src/companyname/app.js',
'js/src/companyname/bar.js'
]
},
uglify: {
options: {
mangle: false
},
prod: {
files: [{
expand: true,
cwd: 'js',
src: [
'vendors/**/*.js',
'companyname/**/*.js'
],
dest: 'js'
}]
}
},
copy: {
main: {
expand: true,
cwd: 'js/src',
src: [
'companyname/**/*.js',
'vendors/**/*.js'
],
dest: 'js/'
}
},
imagemin: {
jpg: {
options: {
optimizationLevel: 8
},
files: [
{
expand: true,
cwd: 'images-src/',
src: ['**/*.jpg'],
dest: 'images/',
ext: '.jpg'
}
]
},
png: {
options: {
optimizationLevel: 8
},
files: [
{
expand: true,
cwd: 'images-src/',
src: ['**/*.png'],
dest: 'images/',
ext: '.png'
}
]
}
},
clean: {
images: {
src: ['images']
}
},
watch: {
compass: {
files: [
'sass/{,*/}*.sass',
'images-src/{,*/}*.{png,jpg,gif}'
],
tasks: [
'compass:dev',
'autoprefixer',
'clean:images',
'imagemin'
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'compass:dev',
'autoprefixer',
'copy',
'concat',
'jshint',
'uglify'
]);
grunt.registerTask('prod', [
'compass:dist',
'autoprefixer',
'copy',
'concat',
'jshint',
'uglify',
'clean:images',
'imagemin'
]);
};
What I'm doing wrong?

You could make two different compass dev's.
compass: {
dev: {
...
force: true
...
},
devWatch: {
... ur original ...
}
}
watch(compass: {tasks: ['compass:devWatch', ...]})
grunt.registerTask('watch', [
'compass:dev',
'watch'
]);
grunt.registerTask('dev', [
'compass:dev'
]);

grunt serve works fine but grunt serve:dist giving strange behaviour

My app works fine with grunt serve but when I test it with grunt serve:dist and try to load modal which I triggered with button click it shows 'templateUrl' which is attached to $mdDialog.show but never shows controller..
here I'm giving files for reference, Ask me if you require any other files as well.
Gruntfile.js
// Generated on 2016-10-17 using generator-angular-material-fullstack 0.1.2
'use strict';
module.exports = function (grunt) {
var localConfig;
try {
localConfig = require('./server/config/local.env');
} catch(e) {
localConfig = {};
}
// Load grunt tasks automatically, when needed
require('jit-grunt')(grunt, {
express: 'grunt-express-server',
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn',
protractor: 'grunt-protractor-runner',
buildcontrol: 'grunt-build-control'
});
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
pkg: grunt.file.readJSON('package.json'),
yeoman: {
// configurable paths
client: require('./bower.json').appPath || 'client',
dist: 'dist'
},
express: {
options: {
port: process.env.PORT || 9000
},
dev: {
options: {
script: 'server/app.js',
debug: true
}
},
prod: {
options: {
script: 'dist/server/app.js'
}
}
},
open: {
server: {
url: 'http://localhost:'
}
},
watch: {
injectJS: {
files: [
'/{app,components}/**/*.js',
'!/{app,components}/**/*.spec.js',
'!/{app,components}/**/*.mock.js',
'!/app/app.js'],
tasks: ['injector:scripts']
},
injectCss: {
files: [
'/{app,components}/**/*.css'
],
tasks: ['injector:css']
},
mochaTest: {
files: ['server/**/*.spec.js'],
tasks: ['env:test', 'mochaTest']
},
jsTest: {
files: [
'/{app,components}/**/*.spec.js',
'/{app,components}/**/*.mock.js'
],
tasks: ['newer:jshint:all', 'karma']
},
injectSass: {
files: [
'/{app,components}/**/*.{scss,sass}'],
tasks: ['injector:sass']
},
sass: {
files: [
'/{app,components}/**/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
files: [
'{.tmp,}/{app,components}/**/*.css',
'{.tmp,}/{app,components}/**/*.html',
'{.tmp,}/{app,components}/**/*.js',
'!{.tmp,}{app,components}/**/*.spec.js',
'!{.tmp,}/{app,components}/**/*.mock.js',
'/assets/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}',
'/assets/icons/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}',
'/assets/iconsets/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}'
],
options: {
livereload: true
}
},
express: {
files: [
'server/**/*.{js,json}'
],
tasks: ['express:dev', 'wait'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '/.jshintrc',
reporter: require('jshint-stylish')
},
server: {
options: {
jshintrc: 'server/.jshintrc'
},
src: [
'server/**/*.js',
'!server/**/*.spec.js'
]
},
serverTest: {
options: {
jshintrc: 'server/.jshintrc-spec'
},
src: ['server/**/*.spec.js']
},
all: [
'/{app,components}/**/*.js',
'!/{app,components}/**/*.spec.js',
'!/{app,components}/**/*.mock.js'
],
test: {
src: [
'/{app,components}/**/*.spec.js',
'/{app,components}/**/*.mock.js'
]
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'/*',
'!/.git*',
'!/.openshift',
'!/Procfile'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/',
src: '{,*/}*.css',
dest: '.tmp/'
}]
}
},
// Debugging with node inspector
'node-inspector': {
custom: {
options: {
'web-host': 'localhost'
}
}
},
// Use nodemon to run server in debug mode with an initial breakpoint
nodemon: {
debug: {
script: 'server/app.js',
options: {
nodeArgs: ['--debug-brk'],
env: {
PORT: process.env.PORT || 9000
},
callback: function (nodemon) {
nodemon.on('log', function (event) {
console.log(event.colour);
});
// opens browser on initial server start
nodemon.on('config:update', function () {
setTimeout(function () {
require('open')('http://localhost:8080/debug?port=5858');
}, 500);
});
}
}
}
},
// Automatically inject Bower components into the app
wiredep: {
target: {
src: '/index.html',
ignorePath: '/',
exclude: ['/json3/', '/es5-shim/']
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'/public/{,*/}*.js',
'/public/{,*/}*.css',
'/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/icons/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/iconsets/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/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: ['/index.html'],
options: {
dest: '/public'
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['/public/{,*/}*.html'],
css: ['/public/{,*/}*.css'],
js: ['/public/{,*/}*.js'],
options: {
assetsDirs: [
'/public',
'/public/assets/images',
'/public/assets/icons',
'/public/assets/iconsets'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'],
[/(assets\/icons\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved icons'],
[/(assets\/iconsets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved iconsets']
]
}
}
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '/assets/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '/public/assets/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '/assets/images',
src: '{,*/}*.svg',
dest: '/public/assets/images'
}]
}
},
// Allow the use of non-minsafe AngularJS files. Automatically makes it
// minsafe compatible so Uglify does not destroy the ng references
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat',
src: '**/*.js',
dest: '.tmp/concat'
}]
}
},
// Package all the html partials into a single javascript payload
ngtemplates: {
options: {
// This should be the name of your apps angular module
module: 'testfullstackApp',
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
usemin: 'app/app.js'
},
main: {
cwd: '',
src: ['{app,components}/**/*.html'],
dest: '.tmp/templates.js'
},
tmp: {
cwd: '.tmp',
src: ['{app,components}/**/*.html'],
dest: '.tmp/tmp-templates.js'
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['/public/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: '',
dest: '/public',
src: [
'*.{ico,png,txt}',
'.htaccess',
'assets/images/{,*/}*.{webp}',
'assets/fonts/**/*',
'assets/icons/**/*',
'assets/iconsets/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '/public/assets/images',
src: ['generated/*']
},{
expand: true,
dot: true,
cwd: '/bower_components/components-font-awesome/',
src: ['fonts/*.*'],
dest: '/public'
}, {
expand: true,
dest: '',
src: [
'package.json',
'server/**/*'
]
}]
},
styles: {
expand: true,
cwd: '',
dest: '.tmp/',
src: ['{app,components}/**/*.css']
}
},
buildcontrol: {
options: {
dir: 'dist',
commit: true,
push: true,
connectCommits: false,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
heroku: {
options: {
remote: 'heroku',
branch: 'master'
}
},
openshift: {
options: {
remote: 'openshift',
branch: 'master'
}
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'sass'
],
test: [
'sass',
],
debug: {
tasks: [
'nodemon',
'node-inspector'
],
options: {
logConcurrentOutput: true
}
},
dist: [
'sass',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
mochaTest: {
options: {
reporter: 'spec'
},
src: ['server/**/*.spec.js']
},
protractor: {
options: {
configFile: 'protractor.conf.js'
},
chrome: {
options: {
args: {
browser: 'chrome'
}
}
}
},
env: {
test: {
NODE_ENV: 'test'
},
prod: {
NODE_ENV: 'production'
},
all: localConfig
},
// Compiles Sass to CSS
sass: {
server: {
options: {
loadPath: [
'/bower_components',
'/app',
'/components'
],
compass: false
},
files: {
'.tmp/app/app.css' : '/app/app.scss'
}
}
},
injector: {
options: {
},
// Inject application script files into index.html (doesn't include bower)
scripts: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '';
},
starttag: '',
endtag: ''
},
files: {
'/index.html': [
[
'{.tmp,}/{app,components}/**/*.js',
'!{.tmp,}/app/app.js',
'!{.tmp,}/{app,components}/**/*.spec.js',
'!{.tmp,}/{app,components}/**/*.mock.js'
]
]
}
},
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'/app/app.scss': [
'/{app,components}/**/*.{scss,sass}',
'!/app/app.{scss,sass}'
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '';
},
starttag: '',
endtag: ''
},
files: {
'/index.html': [
'/{app,components}/**/*.css'
]
}
}
}
});
// Used for delaying livereload until after server has restarted
grunt.registerTask('wait', function () {
grunt.log.ok('Waiting for server reload...');
var done = this.async();
setTimeout(function () {
grunt.log.writeln('Done waiting!');
done();
}, 1500);
});
grunt.registerTask('express-keepalive', 'Keep grunt running', function() {
this.async();
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']);
}
if (target === 'debug') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'concurrent:debug'
]);
}
grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'express:dev',
'wait',
'open',
'watch'
]);
});
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
grunt.registerTask('test', function(target) {
if (target === 'server') {
return grunt.task.run([
'env:all',
'env:test',
'mochaTest'
]);
}
else if (target === 'client') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:test',
'injector',
'autoprefixer',
'karma'
]);
}
else if (target === 'e2e') {
return grunt.task.run([
'clean:server',
'env:all',
'env:test',
'injector:sass',
'concurrent:test',
'injector',
'wiredep',
'autoprefixer',
'express:dev',
'protractor'
]);
}
else grunt.task.run([
'test:server',
'test:client'
]);
});
grunt.registerTask('build', [
'clean:dist',
'injector:sass',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
the code which triggers the modal show:
$mdDialog.show({
templateUrl: 'app/contacts/contact/contact.html',
controller: 'ContactCtrl',
controllerAs: 'cont',
locals: {user: vm.currentUser, contact: angular.copy(contact)}
})
again it works fine with grunt serve. So what could be the issue with grunt serve:dist. Any issue in code or configuration of grunt ?
Note:
--it does not give any error on console when modal is opened on grunt serve:dist but any console messages doesn't prints out and no function of controller works..

Loading "Gruntfile.js"... ERROR >> SyntaxError: Unexpected token { Warning: Task "default not found. Use --force to continue

module.exports = function(grunt){
'use strict';
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Lint JavaScript (validate JS)
jshint: {
all: {
options: {
force: true
},
src: ['Gruntfile.js', 'source/js/*.js', 'source/views/js/*.js']
}
},
// Lint CSS (validate CSS)
csslint: {`enter code here`
lax: {
options: {
force: true
},
src: ['source/css/*.css', 'source/views/css/*.css']
}
},
//Clean and New folder for optimized code
clean: {
dev: {
src: ['dest/'],
},
},
mkdir: {
dev: {
options: {
create: ['dest/']
},
},
},
//Copy thee files in 'dest' folder
copy: {
main: {
files: []
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
],
},
},
//JS Minification
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'dest/js',
src: ['*.js'],
dest: 'dest/js'
},{
expand: true,
cwd: 'dest/views/js',
src: ['*.js'],
dest: 'dest/views/js'
}]
}
},
//CSS Minification
cssmin: {
target: {
files: [{
expand: true,
cwd: 'dist/css',
src: ['*.css'],
dest: 'dist/css',
ext: '.css'
},{
expand: true,
cwd: 'dist/views/css',
src: ['*.css'],
dest: 'dist/views/css',
ext: '.css'
}]
}
},
// resize images from pizza
responsive_images: {
dev: {
options: {
engine: 'im',
sizes: [{
width: 77,
quality: 60
},{
width: 116,
quality: 60
},{
width: 232,
quality: 60
},{
width: 720,
quality: 60
}]
},
files: [{
expand: true,
src: ['**.{gif,jpg,png}'],
cwd: 'dest/views/images/',
dest: 'dest/views/images/'
}]
}
}
});
grunt.registerTask('default', [
'jshint',
'csslint',
'clean',
'mkdir',
'copy',
'uglify',
'cssmin',
'responsive_images'
]);
};
Running grunt in Command Prompt gives ERROR:
Loading "gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token
Warning: Task "default" not found. Use --force to continue.
I don't know where i have gone wrong..Any Help is Appreciated!

You have typo in your gruntfile.
Change
// ... config before
copy: {
main: {
files: []
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
],
},
},
// ... config after
To:
// ... config before
copy: {
main: {
files: [ //removed array close
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
]
}
},
// ... config after

grunt-copy not re-sending the files from my 'development' folder into 'production', when I modify a file

Looks like it's not re-copying my files when I click save anywhere on my development files (so I want to re-copy onto the Production folder immediately). Here is the part from my Gruntfile.js.
Location of this file: /development/Gruntfile.js
Where I want to copy some files: /production
[...]
copy: {
watch: {
options: {
livereload: true
},
files: [
{expand: true, src: ['css/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/vendor/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['images/**'], dest: '../production/'},
{expand: true, src: ['public/**'], dest: '../production/'},
{expand: true, src: ['.htaccess', '404.html', 'apple-touch-icon-precomposed.png', 'crossdomain.xml', 'favicon.ico', 'humans.txt', 'index.html', 'index.php', 'LICENSE.md', 'README.md', 'robots.txt'], dest: '../production/'}
]
}
},
php: {
watch: {
options: {
livereload: true,
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
base: '../production',
port: 8000
}
}
},
watch: {
options: {
livereload: true
},
site: {
files: ['*.html', '*.php', 'public/*.html', 'public/*.php'],
tasks: ['php'],
options: {
spawn: false
}
}
}
[...]
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'copy:watch', 'php:watch', 'watch']);
I always need to restart the script, to re-send the files into "production" folder.
Thank You for your help!
UPDATE
I made an alter solution: everything happening in development folder, and if I want I can push to the production folder with command line. This way I see the final product in local PHP webserver in the development folder, not production.
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'php:watch', 'watch']);
grunt.registerTask('copytoproduction', ['copy']);

Can't get livereload to work in gruntfile.js

This is my first time build a Gruntfile.js and everything is working but live reload, I keep getting a task...Error when I add livereload: true, to the watch options, am I missing something out or have I done something wrong?
I looked here https://github.com/gruntjs/grunt-contrib-watch#optionslivereload and followed guide which states just adding livereload to the options and setting it to true.
module.exports = function(grunt) {
// configure the tasks
grunt.initConfig({
//Build task
copy: {
build: {
cwd: 'source',
src: [ '**', '!**/*.less', '!**/*.coffee', '!**/*.jade' ],
dest: 'build',
expand: true
},
},
// Clean task
clean: {
build: {
src: [ 'build' ]
},
stylesheets: {
src: [ 'build/**/*.css', '!build/application.css' ]
},
scripts: {
src: [ 'build/**/*.js', '!build/application.js' ]
},
},
// Less task
less: {
build: {
options: {
linenos: true,
compress: false
},
files: [{
expand: true,
cwd: 'source',
src: [ '**/*.less' ],
dest: 'build',
ext: '.css'
}]
}
},
// Autoprefixer task
autoprefixer: {
build: {
expand: true,
cwd: 'build',
src: [ '**/*.css' ],
dest: 'build'
}
},
// CSS Minify task
cssmin: {
build: {
files: {
'build/application.css': [ 'build/**/*.css' ]
}
}
},
// Coffee task
coffee: {
build: {
expand: true,
cwd: 'source',
src: [ '**/*.coffee' ],
dest: 'build',
ext: '.js'
}
},
// Uglify
uglify: {
build: {
options: {
mangle: false
},
files: {
'build/application.js': [ 'build/**/*.js' ]
}
}
},
// Html task
jade: {
compile: {
options: {
data: {}
},
files: [{
expand: true,
cwd: 'source',
src: [ '**/*.jade' ],
dest: 'build',
ext: '.html'
}]
}
},
// Watch task
watch: {
stylesheets: {
files: 'source/**/*.less',
tasks: [ 'stylesheets' ]
},
scripts: {
files: 'source/**/*.coffee',
tasks: [ 'scripts' ]
},
jade: {
files: 'source/**/*.jade',
tasks: [ 'jade' ]
},
copy: {
files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
tasks: [ 'copy' ]
}
},
// Connect to server task
connect: {
server: {
options: {
port: 4000,
base: 'build',
hostname: '*'
livereload: true,
}
}
}
});
// load the tasks
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
// builds and cleans the task
grunt.registerTask(
'build',
'Compiles all of the assets and copies the files to the build directory.',
[ 'clean:build', 'copy', 'stylesheets', 'scripts', 'jade' ]
);
// Adds stylesheet to the task
grunt.registerTask(
'stylesheets',
'Compiles the stylesheets.',
[ 'less', 'autoprefixer', 'cssmin', 'clean:stylesheets' ]
);
// Adds javascript to the task
grunt.registerTask(
'scripts',
'Compiles the JavaScript files.',
[ 'coffee', 'uglify', 'clean:scripts' ]
);
//watches and connects to the server
grunt.registerTask(
'default',
'Watches the project for changes, automatically builds them and runs a server.',
[ 'build', 'connect', 'watch']
);
};

You need to add the option to the config for the watch task. Currently you have the setting in the connect task rather than the watch one. Try something like this:
watch: {
options: {
livereload:true,
},
stylesheets: {
files: 'source/**/*.less',
tasks: [ 'stylesheets' ]
},
scripts: {
files: 'source/**/*.coffee',
tasks: [ 'scripts' ]
},
jade: {
files: 'source/**/*.jade',
tasks: [ 'jade' ]
},
copy: {
files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
tasks: [ 'copy' ]
}
},
You will also need to remove it from the connect task

Categories

Resources