I am using this in gruntfile.js.
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'css': 'scss/*.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass'); // Load tasks
grunt.registerTask('default', ['sass']); // Register Task as Default
}
But it is giving me an error when I run this command
Task "sass" not found
Please tell me where am i doing it wrong.
I think you are missing task registration in the beginning of gruntfile
require('load-grunt-tasks')(grunt);
The documentation for using grunt-sass can be found at https://github.com/sindresorhus/grunt-sass/blob/master/readme.md
Related
I'm trying to create new grunt task for generating sprites for magento2. I'm using grunt-spritesmith plugin for that. In Gulpfile.js I have mapped sprite task to grunt-spritesmith in JitGrunt config:
require('load-grunt-config')(grunt, {
configPath: path.join(__dirname, configDir),
init: true,
jitGrunt: {
staticMappings: {
usebanner: 'grunt-banner',
sprite: 'grunt-spritesmith'
}
}
});
in dev/tools/grunt/configs I made a config file sprite.js with contents:
'use strict';
module.exports = {
sprite: {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
}
};
But grunt sprite gives me
>> No "sprite" targets found.
Or if in different configurations I'm able to register sprite task, I'm not able to pass config with src, dest and destCss params.
You have not include task name. This works:
'use strict';
module.exports = {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
};
I am using requirejs and gulp to build angular app. I am using amd-optimize and gulp-requirejs-optimize to add all js files into single file. Here is my main.js file:
require.config(
{
paths: {
app : 'app',
angular : '../bower_components/angular/angular',
jquery : '../bower_components/jquery/dist/jquery',
angularResource : '../bower_components/angular-resource/angular-resource',
angularRoute : '../bower_components/angular-route/angular-route',
publicModule : 'public_module',
route : 'route'
},
shim: {
'app': {
deps: ['angular']
},
'angularRoute': ['angular'],
angular : {exports : 'angular'}
}
}
);
And gulpfile.js
var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var connect = require('gulp-connect');
var requirejsOptimize = require('gulp-requirejs-optimize');
var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');
// using amd-optimize.
gulp.task('bundle', function () {
return gulp.src('app/**/*.js')
.pipe(amdOptimize('main'))
.pipe(concat('main-bundle.js'))
.pipe(gulp.dest('dist'));
});
// using gulp-requirejs-optimize.
gulp.task('scripts', function () {
return gulp.src('app/main.js')
.pipe(requirejsOptimize())
.pipe(gulp.dest('dist'));
});
When I run gulp bundle or gulp scripts, it shows me same content of main.js file in output file(not showing all js template in one output file).
The output file is:
require.config({
paths: {
angular: '../bower_components/angular/angular',
jquery: '../bower_components/jquery/dist/jquery',
angularResource: '../bower_components/angular-resource/angular-resource',
angularRoute: '../bower_components/angular-route/angular-route',
publicModule: 'public_module',
route: 'route'
},
shim: {
'app': { deps: ['angular'] },
'angularRoute': ['angular'],
angular: { exports: 'angular' }
}
});
define('main', [], function () {
return;
});
How can I configure gulp to put every js template into one js file?
check the docs for all the options for amdoptimize. For example you can point to your config file or add paths.
I always have trouble getting all the paths to line up, so make sure to check them diligently.
here is how you can start to put the options in:
gulp.task('requirejsBuild', function() {
gulp.src('app/**/*.js',{ base: 'app' })
.pipe(amdOptimize("app",{
baseUrl: config.app,
configFile: 'app/app-config.js',
findNestedDependencies: true,
}))
.pipe(concat('app.js'))
.pipe(gulp.dest('dist'))
});
You are not requiring any files - you just define an empty module named main.
You need to kick off you app by requiring a module, eg.
require(['app'], function (App) {
new App().init();
});
I'm working on a project with a few others. While they get Gulp to work, it doesn't seem to work on my computer, even through our code is identical.
When I write the 'gulp' command, I get this:
[10:51:17] Starting 'browserify'...
[10:51:19] Finished 'browserify' after 2.37 s
[10:51:19] Starting 'default'...
[10:51:19] Finished 'default' after 17 μs
But when I save the changes in the files Gulp is suppose to be watching, the 'update' event doesnt seem to be triggered.
Here is the Gulp file
var gulp = require("gulp"),
jest = require("gulp-jest"),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify');
require("harmonize")();
var paths = {
scripts: "src/**/*.js",
tests: "__tests__"
};
gulp.task("jest", function () {
return gulp.src(paths.tests).pipe(jest({
scriptPreprocessor: "preprocessor.js",
unmockedModulePathPatterns: [
"../node_modules/react"
],
testPathIgnorePatterns: [
"node_modules",
"spec/support"
],
moduleFileExtensions: [
"js",
"json",
"react"
]
}));
});
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./src/js/TopLevel.js'],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
});
gulp.task("watch", function() {
gulp.watch("src/**/*.js", ["jest"]);
gulp.watch("__tests__/*.js", ["jest"]);
});
gulp.task("default", ["browserify"]);
However, I don't think there is anything wrong with the code, as it works for my other team members.
Any help and comments are highly appreciated!
Try this:
gulp.task("watch", function() {
gulp.watch("./src/**/*.js", ["jest"]);
gulp.watch("./__tests__/*.js", ["jest"]);
});
If you are only running gulp in the command line the watch task will not trigger since the default task is only running browserify, just change your default task to this.
gulp.task("default", ["browserify", "watch"]);
I have succesfully combined grunt-contrib-watch with grunt-nodemon using grunt-concurrent to allow me to autostart my node.js instance whenever I edit and transpile my coffeescript files.
Here is the grunt-concurrent portion of the gruntfile that I use to achieve this:
gruntfile.coffee
concurrent:
dev:
tasks: [
'watch'
'nodemon'
]
options:
logConcurrentOutput: true
The watch and nodemon tasks are configured in the same file but have been removed for brevity. This work fine.
Now I want to add a grunt-node-inspector to the list of concurrent tasks. Like so:
concurrent:
dev:
tasks: [
'watch'
'nodemon'
'node-inspector'
]
options:
logConcurrentOutput: true
According to the grunt-nodemon help file at least, this should be possible as it is given as an example usage: Running Nodemon Concurrently
However this does not work for me. Instead only the first two tasks are started.
Experiments show that grunt-concurrent appears to be limited to running only two tasks concurrently. Any subsequent tasks are ignored. I have tried various options, for example:
concurrent:
dev1:[
'watch'
'nodemon'
]
dev2:[
'node-inspector'
]
options:
logConcurrentOutput: true
grunt.registerTask 'default', ['concurrent:dev1', 'concurrent:dev2']
I also have tried setting the limit option to 3. I had high hopes for this so maybe I have misunderstood how to apply the value correctly:
concurrent:
dev:
limit: 3
tasks: [
'watch'
'nodemon'
'node-inspector'
]
options:
logConcurrentOutput: true
But I cannot get my third blocking task to run.
Question
How can I get all three blocking tasks running at the same time?
Thanks.
Put the limit value in the option, like so:
concurrent: {
tasks: ['nodemon', 'watch', 'node-inspector'],
options: {
limit: 5,
logConcurrentOutput: true
}
}
I've been using grunt.util.spawn to run my tasks and include the 1 blocking call at the end.
http://gruntjs.com/api/grunt.util#grunt.util.spawn
http://nodejs.org/api/process.html#process_signal_events
This block kills the children.
var children = [];
process.on('SIGINT', function(){
children.forEach(function(child) {
console.log('killing child!');
child.kill('SIGINT');
});
});
module.exports = function (grunt) {
'use strict';
...
Then I register a task
grunt.registerTask('blocked', 'blocking calls', function() {
var path = require('path')
var bootstrapDir = path.resolve(process.cwd()) + '/bootstrap';
var curDir = path.resolve(process.cwd());
children.push(
grunt.util.spawn( {
cmd: 'grunt',
args: ['watch'],
opts: {
cwd: bootstrapDir,
stdio: 'inherit',
}
})
);
children.push(
grunt.util.spawn( {
cmd: 'grunt',
args: ['nodemon'],
opts: {
cwd: curDir,
stdio: 'inherit',
}
})
);
children.push(
grunt.util.spawn( {
cmd: 'grunt',
args: ['node-inspector'],
opts: {
cwd: curDir,
stdio: 'inherit',
}
})
);
grunt.task.run('watch');
});
In your case, you can change the current working dir to the gruntfile.js and run multiple instances.
It seems to me that I've missed something. Is there any possibility to make subtasks for Stylus or RequireJS within Grunt? I mean something like that:
grunt.initConfig({
stylus: {
dev: {
compile: {...}
},
prod: {
compile: {...}
}
}
});
For me it doesn't work. However when I write:
...
stylus: {
compile: {...}
}
...
it work fine, creates file and so on... So what am I doing wrong?
Grunt tasks run in the next format:
taskname: {
subtaskname: {
// options
}
}
So in order to make it work, you don't need to put the compile object within your dev and prod subtasks.
stylus: {
dev: {
// options
},
prod: {
// options
}
}
Best regards.