Gulp - studiofu/brain GitHub Wiki

Quick Start

Glup is a “build tools”, “bundling”, “pre-processing” for front end application

Install Tools

-- global
sudo npm install gulp -g

-- create project directory and init npm
npm init

-- install to the project
npm install gulp --save-dev
npm install gulp-sass --save-dev
npm install browser-sync --save-dev

Sample gulpfile.js

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

gulp.task('hello', function() {
    console.log("hello...");
});

// sass example
gulp.task('sass', function(){
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass()) // Converts Sass to CSS with gulp-sass
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({
        stream: true
      }))
  });

var browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
    browserSync.init({
    server: {
        baseDir: 'app'
    },
    })
});

// watch the file change
gulp.task('watch', gulp.parallel('browserSync','sass',function(){
    //gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
    // Other watchers
}));

task command

gulp hello
gulp watch

Resources

Simple Tutorials

https://abgne.tw/web/gulp/gulp-tuts-install-gulp-js.html

https://css-tricks.com/gulp-for-beginners/

https://github.com/Platform-CUF/use-gulp

Front End Starter

https://blog.kdchang.cc/2016/11/05/how-to-establish-modern-front-end-development-environment-tutorial/