I am following this tutorial Link. I am using a windows PC
My SASS version is 3.4.16
This is my Gruntfile.js
module.exports = function(grunt) {
// Read package.json
grunt.file.readJSON('package.json');
//Initialize grunt
grunt.initConfig({
// Sass task
sass: {
// Sass development options
dev: {
options: {
style: 'expanded',
},
files: {
'css/main.css': 'css/sass/dev.scss'
}
},
// Sass distribution options
dist: {
options: {
style: 'compressed'
},
files: {
'css/main.css': 'css/sass/main.scss'
}
}
},
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-sass');
// Create Default Task
grunt.registerTask('dev', [
'sass:dev' // Compile Sass with dev settings
]);
// Create Distribution Task
grunt.registerTask('dist', [
'sass:dist' // Compile Sass with distribution settings
]);
}
When I reun this code i get an error as
Running "sass:dist" (sass) task Errno::ENOENT: No such file or
directory # rb_sysopen - undefined Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.
Could someone please help me with this.
Related
I'm trying to install the Airbnb JavaScript style guide into my environment. I'm using gulp to show linting errors as I save my .js files but it does not show it. If I do 'eslint main.js' it shows me the errors.
Is there any way I can show it through gulp when I execute 'gulp'?
Here are my config files:
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
],
dist: './dist',
mainJs: './src/main.js'
}
};
...
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format())
.pipe(lint.failAfterError());
});
gulp.task('watch', function () {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['css']);
});
gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);
my main.js file:
test = 1;
var App = console.log('Testing Browserify');
module.exports = App;
and here is what I see when I run 'gulp' and also when I run 'eslint main.js'. Errors should show on the terminal to the right, but it does not show any linting errors.
Have you tried setting your eslint configuration file on lint call?
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint({
// Load a specific ESLint config
configFile: 'eslintConfig.json'
}
))
.pipe(lint.format())
.pipe(lint.failAfterError());
});
From: https://github.com/adametry/gulp-eslint/blob/master/example/config.js
This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either
You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile
I'm trying to build my JS-bundle via grunt/browserify. I also use grunt for scss compile. For that I use grunt-watch to trigger scss compile on changes.
I wanted the same behavior for JS-browserify. grunt-browserify comes with the "watch" option, which does the trick very well.
My only issue is: I want to get notified after a "re-browserify". For SCSS I use grunt-notify. But I do not find any way to trigger a grunt task after browserify-watch.
My gruntfile excerpt:
var gruntOptions = {
notify: {
browserify_node_modules: {
options: {
title: "Browserify",
message: "node_modules build"
}
}
},
browserify: {
node_modules: {
src: ["node_modules.js"],
dest: "trunk/js/lib/node_modules.js",
options: {
watch: true,
}
}
}
};
Best case scenario:
options: {
watch: true,
finishTask: "notify:browserify_node_modules"
}
Thanks!
You can check if the file generated by Browserify has been changed and then, trigger a task.
Install watch task in Grunt:
npm install grunt-contrib-watch --save-dev
Configure watch task within Gruntfile.js:
grunt.initConfig({
// other tasks
your_task: {
// ...
},
watch: {
dev: {
files: 'trunk/js/lib/node_modules.js', // file generated by Browserify
options: { spawn: false },
tasks: ['your_task']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
I'm trying to setup my gruntconfig.js and while the tasks are running without errors on terminal, Autoprefixer and Grunt's Watch are not working at all.
Am I doing something wrong?
BTW can I run Saas and Autoprefixer together?
module.exports = function(grunt) {
// configures task(s)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
outputStyle: 'expanded'
},
files: {
'css/style.css' : 'src/scss/main.scss.css'
}
}
},
watch: {
css: {
files: 'src/scss/main.scss.css',
tasks: ['sass', 'autoprefixer']
}
},
autoprefixer: {
files: {
'css/style.css': 'src/scss/main.scss.css'
}
}
});
// Load the Plugins
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
// Register Task(s)
grunt.registerTask('default', ['autoprefixer', 'sass'] );
};
And here's my directory structure
assets
css
style.css
normalize.css
fonts
gruntfile.js
img
index.html
js
node_modules
package.json
src
design
js
scss
main.scss
It's my 1st time doing this.
Never mind. I started using Codekit.
Waaaay better!
I've installed grunt-hub into my workspace, which looks like this
hub/
node_modules/
grunt/
grunt-hub/
Gruntfile.js
package.json
In Gruntfile.js I have written this,
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg : grunt.file.readJSON( 'package.json' ),
hub: {
src: [
'hub/*/Gruntfile.js'
],
watch: {
src: '<%= hub.src %>',
tasks: ['watch']
}
}
});
grunt.loadNpmTasks('grunt-hub');
grunt.registerTask('default', []);
}
I have four files within the hub directory, which have their own Gruntfiles.
hub/
project1/
...
Gruntfile.js
...
project2/
...
Gruntfile.js
...
project3/
...
Gruntfile.js
...
project4/
...
Gruntfile.js
...
When I run...
grunt hub
...it works perfectly fine; it watches all the changes I make and runs how I've commanded them to run.
The only problem is in the command prompt I am told...
>> C:\Grunt\hub\project1\Gruntfile.js:
Running "watch" task
Waiting...
>> C:\Grunt\hub\project2\Gruntfile.js:
Running "watch" task
Waiting...
>> C:\Grunt\hub\project3\Gruntfile.js:
Running "watch" task
Waiting...
...but am not told that project4 is being watched. When I make changes to files relating to project4, nothing happens, whereas it does for everything else.
What can I do to make it watch project4 as well?
Try changing options.concurrent as per https://www.npmjs.org/package/grunt-hub
The livereload has an effect on this. Here are some options:
Add the watch task to your tasks list in your hub task config (grunt.config.hub.js):
watch: {
options: {
allowSelf: true
},
src: hubSettings.src,
tasks: ['watch']
},
OR:
Run grunt hub with the watch task set as default: grunt hub:target:watch
References
grunt-hub issue #28: Doesn't support grunt-contrib-watch option livereload:true
Multi module JavaScript project with Grunt
I have this working in the following way:
// scss files to watch ##
watch_scss: [
'wp-content/themes/**/*.scss', // regex to track all sass files in themes ##
'wp-content/plugins/**/*.scss', // regex to track all sass files in plugins ##
],
// grunt hub - master controller ##
hub: {
all: {
options: {
allowSelf: true,
},
src: [
'Gruntfile.js', // this grunt file ##
'wp-content/themes/**/Gruntfile.js', // in themes ##
'wp-content/plugins/**/Gruntfile.js' // in plugins ##
],
tasks: [ 'default' ]
},
},
// watch task ##
'watch': {
// track changes to scss src files ##
'sass': {
'options': {
'livereload': 1337, // dedicated port for live reload ##
'debounceDelay': 5000, // wait a little for sass to complete ##
},
'files':
'<%= watch_scss %>' // files defined in config ##
,
'tasks': [
[], // nada ##
]
},`
Be sure to include grunt-watch task:
grunt.loadNpmTasks( 'grunt-contrib-watch' ); // Watcher ##
And define a grunt task for default:
grunt.registerTask( 'default', [
'watch', // watch ##
]);
Make sure your individual gruntfiles don't also have livereload option on watch tasks, then run "grunt hub:all:watch"