How to set up Gulp.task default Sass and watch

Asked

Viewed 647 times

1

hello I’m having some problems configuring gulpfile.js to automate the conversion of Sass to css in the test project, below I explain the environment and errors presented

Folder structure

//layout
| |/node_modules
| |/src
| | /css
| |   |bootstrap-grid.css
| |   |bootstrap-reboot.css
| |   |bootstrap.css
| |   |style.css
| | /js
| |   |bootstrap.js
| |   |jquery.js
| |   |popper.js
| | /scss
| |   |style.scss
| |index.html
|gulpfile.js
|package-lock.json
|package.json

in the/src/index.html layout file

<!doctype html>
<html lang="pt-br">
  <head>
    <!--meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/Bootstrap.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery, Popper.js, Bootstrap.js -->

    <script src="js/jquery.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

the layout file/gulpfile.js

var gulp = require('gulp');
    var sass = require('gulp-sass');
    var watch = require('gulp-watch');

//task para o sass
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/*.scss', 'src/scss/*.scss'])
    .pipe(sass()) //converter o sass em css
    .pipe(gulp.dest("src/css"));
});

//task para watch
gulp.task('watch', function() {
    gulp.watch(['node_modules/bootstrap/scss/*.scss', 'src/scss/*.scss'], ['sass']);
});

//task para default gulp
//gulp.task('default', ['sass', 'watch']);

comment to the default task because executing the $Gulp command on the cmd or bash terminal returns an error

$ gulp
assert.js:339
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\bs_wp\layout\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\bs_wp\layout\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (C:\bs_wp\layout\gulpfile.js:18:6)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)

then I commented on the default task and ran the code with the $Gulp watch command that starts but presents a problem right away

$ gulp watch
[01:54:32] Using gulpfile C:\bs_wp\layout\gulpfile.js
[01:54:32] Starting 'watch'...
[01:54:32] 'watch' errored after 7.05 ms
[01:54:32] Error: watching node_modules/bootstrap/scss/*.scss,src/scss/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (C:\bs_wp\layout\node_modules\gulp\index.js:31:11)
    at C:\bs_wp\layout\gulpfile.js:14:10
    at taskWrapper (C:\bs_wp\layout\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (C:\bs_wp\layout\node_modules\async-done\index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

I do not have much knowledge in the area read about Gulp.Parallel and Gulp.series but my English is bad, n absorbed right information the configuration of Gulp was a little confused for me

javascript css node.js sass gulp

1 answer

1

Your gulpfile.js code has some details, but the main thing is that you are not putting the function inside the gulp.series and not using the gulp.parallel( ['sass'] ) in the task

Test by putting exactly this script below replacing what is inside your gulpfile.js that its task should run.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', gulp.series( function() {
    return gulp.src(['node_modules/bootstrap/scss/*.scss', 'src/scss/*.scss'])
    .pipe(sass()) // converter o Sass em CSS
    .pipe(gulp.dest('src/css'));
}));

gulp.task('watch', gulp.series( function() {
    gulp.watch(['node_modules/bootstrap/scss/*.scss', 'src/scss/*.scss'], gulp.parallel( ['sass'] ));
}));

gulp.task('default', gulp.series( ['sass', 'watch'] ));

Browser other questions tagged javascript css node.js sass gulp

You are not signed in. Login or sign up in order to post.