I have a problem with grunt. My Grunt version is:
grunt-cli v1.4.3
grunt v1.4.1
An Error occurs as I run any task.
Warning: Task "speak" not found. Use --force to continue.
This occurs with every function I run (for example grunt css or grunt default function) . I tried to take out whole code and make a test function and it worked... So I can sort out that the global installation is the problem. It must be my Gruntfile that is wrong.
Meanwhile I found out that some tasks were not in the right syntax structure. I changed that. Now it run my default task and other tasks without errors and firstly it looked like all runs fine. But as I tested it. The Changes in SCSS file doesn't show up in the compiled CSS File...
So something must be still wrong. So I added the new Gruntfile and replaced my name in Banner with name (so don't wonder about that). Maybe somebody know this issue... I also not know if it really would make the sourcemaps with this gruntfile code without additional plugins... But most important is that it compiles the scss ... without the whole reason of using grunt is gone...
Does anybody have an idea whats wrong
module.exports = function(grunt) {
grunt.initConfig({
package: grunt.file.readJSON('package.json'),
concat: {
js: {
src: 'scripts/js/**/_*.js',
dest:'scripts/js/app.js'
},
css: {
src: 'scripts/css/**/_*.css',
dest: 'scripts/css/app.css'
},
options: {
stripBanners: true,
banner: '//<%= package.name %> - Minified main Javascript from *Name* - <%= grunt.template.today("yyyy-mm-dd") %>'
}
},
uglify: {
options: {
banner: '//<%= package.name %> - Minified main Javascript from *Name* - <%= grunt.template.today("yyyy-mm-dd") %>',
mangle: {
reserved: 'jQuery'
},
compress: {
global_defs: {
"DEBUG": false
},
},
dead_code: false,
unused: false,
drop_console: true
},
build: {
src: 'scripts/js/app.js',
dest: 'build/scripts/js/app.min.js'
}
},
cssmin: {
options: {
specialComments: 0,
mergeIntoShorthands: false,
roundingPrecision: -1
},
target: {
files: {
'build/scripts/css/app.css': 'scripts/css/app.css'
}
}
},
sass: {
build: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: [{
expand: true,
cwd: 'scripts/css/',
src: ['scripts/scss/**/_*.scss'],
dest: 'scripts/css/',
ext: '.css'
}]
}
},
watch: {
js: {
files: ['scripts/js/_*.js'],
tasks: ['concat', 'uglify']
},
css: {
files: ['scripts/scss/_*.scss'],
tasks: ['concat', 'sass', 'cssmin']
},
php: {
files: ['*.html'],
tasks: ['htmlmin']
}
},
htmlmin: {
options: {
collapseWhitespace: true
},
target: {
files: {
src: '*.html',
dest: 'build/index.html'
}
}
}
});
//Load Plugins of Grunt
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//Grunt Tasks
grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'uglify']);
grunt.registerTask('all', ['sass', 'concat', 'cssmin','uglify']);
grunt.registerTask('css', ['sass', 'concat', 'cssmin']);
grunt.registerTask('js', 'uglify');
grunt.registerTask('publish', ['sass', 'concat', 'cssmin', 'uglify', 'htmlmin']);
grunt.registerTask('speak', function() {
console.log('I am running!');
});
};
Packages installes for grunt in package.json:
"devDependencies": {
"debug": "^4.3.1",
"grunt": "^1.4.1",
"grunt-cli": "^1.4.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
}
}
Related
Grunt is running and detecting the change but the compilation is not happening due to the error "Could not find an option named "sourcemap"
Ruby was not installed since it was required before, I installed it.
Updated all the node packages inside the package.json file. SCSS/CSS files are in the correct path as fas as I know, not sure what could be the issue.
ui = {
'grunt' :
{
'js_files' :
[
'web/webroot/_ui/responsive/theme-blue/razer/js/jquery-ui-1.11.2.custom.min.js'
]
}
}
//'use strict';
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Compile Sass
sass: {
options: {
sourcemap: 'none'
},
compile: {
files: {
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.home.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.branding.scss',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css': 'web/webroot/_ui/responsive/theme-blue/razer/sass/main.whitepdp.scss'
}
}
},
//Minify css
cssmin: {
target: {
files: [
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.home.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.home.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.branding.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.branding.css'
},
{
src: [
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/main.whitepdp.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.carousel.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/owl.theme.default.min.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/simplebar.css',
'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/styles.css'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/stylesheets/mainmin.whitepdp.css'
}
]
}
},
imagemin: { // Task
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'web/webroot/_ui/responsive/theme-blue/razer/images/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'web/webroot/_ui/responsive/theme-blue/razer/images/' // Destination path prefix
}]
}
},
//Uglify js
uglify: {
build: {
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}],
files: [{
src: [
'web/webroot/_ui/responsive/common/js/jquery-2.1.1.min.js'
],
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined_lib.js'
}]
},
debug: {
options: {
beautify: false,
mangle: false,
compress: true
},
files: [{
src: ui.grunt.js_files,
dest: 'web/webroot/_ui/responsive/theme-blue/razer/js/combined.js'
}]
}
},
watch: {
css: {
files: ['**/*.scss', '**/*.css'],
tasks: ['sass', 'cssmin']
},
build: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js', 'web/webroot/_ui/responsive/theme-blue/razer/js/plugin/*.js'], // which files to watch
tasks: ['uglify:build'],
options: {
nospawn: true
}
},
debug: {
files: ['web/webroot/_ui/responsive/theme-blue/razer/js/*.js', 'web/webroot/_ui/responsive/common/js/*.js'], // which files to watch
tasks: ['uglify:debug'],
options: {
nospawn: true
}
}
}
});
// Plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
//grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('build', ['watch']);
grunt.registerTask('default', ['sass', 'cssmin', 'uglify']);
grunt.registerTask('debug', ['uglify:debug', 'watch:debug']);
grunt.registerTask('lib', ['uglify:lib']);
};
I am experiencing the same issue. I recently switched machines and upgraded to OS Catalina (not sure if this is related to the error).
A (temporary) solution that worked for me is to edit Gruntfile.js and remove the 'sourcemap' option:
before:
options: {
style: 'compressed',
sourcemap: true
},
after:
options: {
style: 'compressed'
},
most likely you have an old sass engine
just do gem install sass or sudo gem install sass
I am using 'cssmin' and 'sass' grunt task separately, Is it possible to run them one after other automatically, when I can anything in my file.
cssmin: {
target: {
files: [{
cwd: srcCss,
src: ['**/*.css', '*.css'],
dest: buildCss
}]
}
},
sass: {
target: {
files: [{
cwd: srcScss,
src: ['**/*.scss', '*.scss'],
dest: srcCss
}]
}
}
This can be done easily: You need to use watch plugin,
npm install grunt-contrib-watch
grunt.loadNpmTasks('grunt-contrib-watch');
3.
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
jshint: {
all: {
src: ['lib/*.js'],
},
},
});
// Default task(s).
grunt.registerTask('default', 'watch');
Now Just run grunt in cmd.
I have a Gruntfile.js set up with Post CSS running autoprefixer, mqpacker, and cssnano at the moment.
I have a default grunt build that will work to build everything for deployment. It includes the call to postcss, like so:
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
The issue is I also want the default grunt build process to be for everyday dev work - one that omits (turns off) the media query compilation and minification from Post CSS.
However, I want to leave autoprefixer on. This wasn't a problem with grunt when autoprefixer ran as a separate program, we just make a new grunt.registerTask
Now that autoprefixer now runs inside of Post CSS, how do we make these different build processes work, without commenting out the individual plugins in CSS (clumsy) and restarting grunt every time we want to do a different build?
My Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Sass to CSS
sass: {
app: {
files: [{
expand: true,
cwd: 'scss',
src: ['**/*.scss'],
dest: 'css/src',
ext: '.css'
}]
},
options: {
sourceMap: true,
outputStyle: 'expanded',
imagePath: "../"
}
},
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
// Configuration
options: {
map: true,
// Load plugins
processors: [
// Runs Post CSS Autoprefixer
require('autoprefixer')({browsers: ['last 2 versions']}),
// require('postcss-import')(),
require('css-mqpacker')(),
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
},
// Operate on compiled Sass, write global.css
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
// JS Concatenation Plugin
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/src/*.js' // All JS in the src folder
],
dest: 'js/scripts.js'
}
},
// JS Minification
uglify: {
build: {
src: 'js/scripts.js',
dest: 'js/scripts.min.js'
}
},
// Image Minification -- run on demand w/ `grunt imagemin`
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
// BrowserSync
browserSync: {
dev: {
bsFiles: {
src : [
'css/*.css',
'**/*.{html}'
]
},
options: {
watchTask: true,
server: './'
}
}
},
// Watch
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['sass', 'postcss']
},
js: {
files: ['js/src/*.js'],
tasks: ['concat', 'uglify']
},
options: {
livereload: false,
spawn: false
}
},
});
// Loads Grunt Tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default Task
grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);
};
I would split them into subtasks so that I could call them separately in different registered tasks:
// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {
prefix: {
options: {
map: true,
// Load plugins
processors: [
require('autoprefixer')({browsers: ['last 2 versions']})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
pack: {
options: {
map: true,
// Load plugins
processors: [
require('css-mqpacker')()
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
},
nano: {
options: {
map: true,
// Load plugins
processors: [
require('cssnano')({
autoprefixer: false,
safe: true,
sourcemap: false
})
]
}
dist: {
src: 'css/src/global-sass.css',
dest: 'css/global.min.css'
}
}
}
and then
grunt.registerTask('default', ['sass', 'postcss:prefix', 'postcss:pack', 'postcss:nano', 'concat', 'uglify', 'browserSync', 'watch']);
or whichever way suits your project.
Hope it helps
The output of the Gruntfile is an empty file in public/assets/app.js. The Sass-part works fine, but the JS-part doesn't.
//Gruntfile
module.exports = function(grunt) {
//Initializing the configuration object
grunt.initConfig({
// Task configuration
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'./public/assets/app.css': './app/assets/scss/style.scss'
},
noCache: true
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: [
'./app/bower/jquery/jquery.js',
'./app/assets/js/script.js'
],
dest: './public/assets/app.js',
},
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'./public/assets/app.js': './public/assets/app.js',
}
},
},
jshint: {
all: ['Gruntfile.js', './public/assets/app.js']
},
watch: {
js: {
files: [
'./app/assets/bower/*.js',
'./app/assets/js/*.js'
],
tasks: ['jshint', 'concat', 'uglify'],
options: {
livereload: false
}
},
sass: {
files: ['./app/assets/scss/*.scss'],
tasks: ['sass'],
options: {
livereload: false
}
}
}
});
// Plugin loading
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Task definition
grunt.registerTask('default', ['sass', 'jshint', 'concat', 'uglify', 'watch']);
};
But I can't find out what is wrong. Even JShint isn't showing errors.
Structure looks like this: https://www.dropbox.com/s/y0t2tu0asotz0ex/Screenshot%202013-12-20%2020.49.54.png
Taking another look at your Gruntfile and directory structure, I think you have the folders specified incorrectly, You specify the source as being ./app/..., but if your Gruntfile is in that directory (app), then you would have to be running your grunt tasks from there, meaning it would be looking for app/app/... (because it's relative to the current directory). Try this:
concat: {
options: {
separator: ';',
},
dist: {
src: [
'bower/jquery/jquery.js',
'assets/js/script.js'
],
dest: 'public/assets/app.js',
},
},
My solution is set correct filepath: Scripts/libs/Timer.js - correct, /Scripts/libs/Timer.js - empty file
Scripts is a folder into my project.
Project/Scripts/libs/Timer.js - full path.
when I set this path:
Scripts/libs/Timer.js - file isn't empty, when /Scripts/libs/Timer.js - file is empty.
concat: {
options:{
// define a string to put between each file in the concatenated output
separator: '\n;'
},
own_scripts: {
//project-files
src: [
"Scripts/application/app.js",
"Scripts/application/Controllers/*.js",
"Scripts/application/Directives/*.js",
"Scripts/application/Filters/*.js",
"Scripts/application/Services/*.js"
],
dest: 'dist/scripts-concat.js'
}
maybe you should do this:
dist: {
src: [
'app/bower/jquery/jquery.js',
'app/assets/js/script.js'
],
dest: 'public/assets/app.js',
},
I'm quite new to grunt, and I'm trying to enable livereload.
The problem is that I can't seem to get it working.
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
my_target: {
files: {
'dest/complete.min.js': ['scripts/*.js']
}
}
},
jshint: {
files: ['gruntfile.js', 'srcipts/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
livereload : {
options : {
base : '/',
},
files : ['/**/*']
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.registerTask('default', ['jshint', 'uglify','livereload']);
};
package.json:
{
"name": "my-app",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-livereload": "0.1.2",
"matchdep": "~0.1.2"
}
}
I don't get any errors,
I've tried: "grunt" and "grunt livereaload-start".
When going to my website via localhost - it won't connect.
And viewing the website via the file:// protocol will not reload when changes are made to css files.
Thanks in advance.
Live reloading has been moved to the watch task. Please see: https://github.com/gruntjs/grunt-contrib-watch#live-reloading
grunt.initConfig({
watch: {
livereload: {
options: { livereload: true },
files: ['dist/**/*'],
},
},
});