I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp.
Here are the steps I took:
- Installed NodeJs on my machine
- Installed gulp globally by running
npm install -g gulp - Created a file named
gulpfile.jsin the root of my project - Generated the
package.jsonfile usingnpm init - Added gulp to my development dependencies with the command
npm install gulp --save-dev - Implemented the code below in my
gulpfile.js Ran the
gulpcommand from the console, which provided the following outputUsing gulpfile ...gulpfile.js
Starting 'watch'...
Finished 'watch' after 21 ms
Starting 'default'...
Finished 'default' after 31 µs
However, despite coding in ~/Assets/Sass/**/*.sass, nothing is being saved into ~/Public/Css/bundle.css as expected.
Below is the content of my gulpfile.js:
const gulp = require('gulp'),
sass = require('gulp-ruby-sass');
// Default task triggered when starting the runner
gulp.task('default', ['watch']);
// Watch for changes in the sass directory and trigger "compileSass" upon save
gulp.task('watch', function(){
//Watch any change in the sass directory and trigger the "compileSass" for every save
gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']);
});
// Compiling the sass files
gulp.task('compileSass', () =>
sass('~/Assets/Sass/**/*.sass')
.on('error', sass.logError)
.pipe(gulp.dest('~/Public/Css/bundle.css'))
);
What could be missing here? How can I ensure that watch is activated and tasks are executed after each save?
Update:
I made the switch from gulp-ruby-sass plugin to gulp-scss. Now, the task runs every time I save a scss file but it still doesn't update the destination file.
Here's how my revised gulpfile.js now looks like:
const gulp = require('gulp'),
scss = require('gulp-scss');
// Default task triggered when starting the runner
gulp.task('default', ['watch']);
// Watch for changes in the "Scss" directory and trigger "compileScss" upon save
gulp.task('watch', function(){
//Watch any change in the "Scss" directory and trigger the "compileScss" for every save
gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']);
});
// Compile the "Scss" files
gulp.task('compileScss', function () {
gulp.src('./Assets/Scss/**/*.scss')
.pipe(scss({ "bundleExec": true }))
.pipe(gulp.dest('./Public/Css/bundle.css'));
});