What is gulp?

http://gulpjs.com/ Believe you will understand!

What are the advantages over the well-known build tool, grunt?

Easy to use, code better than configuration
Efficient, won't produce too many intermediate files, reduce I/O pressure
Easy to learn, very few API s, you can learn gulp in very short events
Those commonly used gulp plugins
No.1,run-sequence

Links: https://www.npmjs.com/package/run-sequence

Role: Make gulp tasks independent of each other, relieve dependency between tasks, and enhance task reuse

Recommended Index:

No.2,browser-sync

Links: http://www.browsersync.io/

Role: Static file server, also supports automatic browser refresh

Recommended Index:

No.3,del

Links: https://www.npmjs.com/package/del

Role: Delete files/folders

Recommended Index:

No.4,gulp-coffee

Links: https://github.com/wearefractal/gulp-coffee

Role: Compile coffee code as Js code, requisite for using coffeescript

Recommended Index:

No.5,coffee-script

Links: https://www.npmjs.com/package/coffee-script

Role: gulpfile uses js suffix by default, this module is required if you want to write using gulpfile.coffee

Recommended Index:

No.6,gulp-nodemon

Links: https://www.npmjs.com/package/gulp-nodemon

Role: Automatically start/restart your node program, which is essential for developing a node server program

Recommended Index:

No.7,yargs

Links: https://www.npmjs.com/package/yargs

Role: Used to obtain startup parameters, for different parameters, switch task execution process needs

Recommended Index:

No.8,gulp-util

Links: https://www.npmjs.com/package/gulp-util

Role: Common tool libraries for gulp

Recommended Index:

No.9,gulp-uglify

Links: https://www.npmjs.com/package/gulp-uglify

Role: Compress JS files with UglifyJS

Recommended Index:

No.9,gulp-concat

Links: https://www.npmjs.com/package/gulp-concat

Role: Merge JS

Recommended Index:

No.10,gulp-sourcemaps

Links: https://www.npmjs.com/package/gulp-sourcemaps

Role: Generate SourceMap when processing JS

Recommended Index:

No.11,gulp-less

Links: https://www.npmjs.com/package/gulp-less

Role: Preprocess less as css

Recommended Index:

No.12,gulp-sass

Links: https://www.npmjs.com/package/gulp-sass

Role: Preprocess sass as css

Recommended Index:

No.13,gulp-autoprefixer

Links: https://www.npmjs.com/package/gulp-autoprefixer

Role: Use Autoprefixer to complete browser-compatible css.

Recommended Index:

No.14,gulp-minify-css

Links: https://www.npmjs.com/package/gulp-minify-css

Action: Compress css.

Recommended Index:

No.15,connect-history-api-fallback

Links: https://www.npmjs.com/package/connect-history-api-fallback

Role: angular applications must be developed to support the HTML5 history API.

Recommended Index:

General gulpfile file (written in coffee)
First, the node application:

gulp = require('gulp')
runSequence = require('run-sequence')

coffee = require('gulp-coffee')
gutil = require('gulp-util')
del = require('del')
nodemon = require('gulp-nodemon')
argv = require('yargs').argv
rename = require('gulp-rename')
browserSync = require('browser-sync')
reload = browserSync.reload

# Processing parameters
isDebug = not (argv.r || false)

# --Entry Task-------------------------------------------------------------------------
gulp.task('default', (callback)->
  runSequence(
    ['clean']
    ['coffee-server', 'copy-server', 'copy-client', 'coffee-client', 'copy-views']
    'serve'
    ['browserSync', 'watch']
    callback
  )
)
# -- Build related tasks---------------------------------------------------------------------------------------------------------
gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)

gulp.task('coffee-server', ->
  gulp.src([
    './src/**/*.coffee'
    '!./src/public/**/*.coffee'
    '!./src/views/**'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-server', ->
  gulp.src([
    './src/config*/*.json'
    './src/database*/*.*'
  ])
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-client', ->
  gulp.src([
    './src/public*/**/*'
    '!./src/public*/**/*.coffee'
  ])
  .pipe(gulp.dest('./dist/'))
)

gulp.task('coffee-client', ->
  gulp.src([
    './src/public*/**/*.coffee'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)

gulp.task('copy-views', ->
  gulp.src('./src/views/**/*.html')
  .pipe(rename({extname: '.vash'}))
  .pipe(gulp.dest('./dist/views'))
)


# --Start the program, open the browser task--------------------------------------------------------------------------------------------------------------------------------------------
nodemon_instance = undefined
gulp.task('serve', (callback)->
  called = false
  if not nodemon_instance
    nodemon_instance = nodemon({
      script: './dist/index.js'
      ext: 'none'
    })
    .on('restart', ->
      console.log('restart server......................')
    )
    .on('start', ->
      if not called
        called = true
        callback()
    )
  else
    nodemon_instance.emit("restart")
    callback()
  nodemon_instance
)

gulp.task('browserSync', ->
  browserSync({
    proxy: 'localhost:3000'
    port: 8888
  #files: ['./src/public/**/*']
    open: true
    notify: true
    reloadDelay: 500 # Delayed refresh
  })
)



# --Monitoring task----------------------------------------------------------------------------------------------------------------------------------------------------
gulp.task('watch', ->
  gulp.watch([
    './src/**/*.*'
    '!./src/**/*.coffee'
  ], ['reload-client'])
  gulp.watch('./src/**/*.coffee', ['reload-server'])
)

gulp.task('reload-client', (callback) ->
  runSequence(
    ['copy-client', 'coffee-client', 'copy-views']
    'bs-reload'
    callback
  )
)

gulp.task('reload-server', (callback) ->
  runSequence(
    ['copy-server', 'coffee-server']
    'serve'
    'bs-reload'
    callback
  )
)

gulp.task('bs-reload', ->
  browserSync.reload()
)

Next comes the front-end website:

gulp = require('gulp')
gutil = require('gulp-util')
coffee = require('gulp-coffee')
del = require('del')
runSequence = require('run-sequence')
browserSync = require('browser-sync')
historyApiFallback = require('connect-history-api-fallback')
# entry point
gulp.task('default', ->
  runSequence(
    ['clean']
    ['copy']
    ['serve']
  )
)

gulp.task('copy', ->
  gulp.src([
    './src/**/*.*'
    '!./src/**/*.coffee'
    '!./src/**/*.less'
  ])
  .pipe(gulp.dest('./dist'))
)

gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)

gulp.task('serve', ->
  browserSync({
    server: {
      baseDir: "./dist"
      middleware: [historyApiFallback]
    }
    port: 2222
  })
)

gulp.task('watch', ->
  # do something...
)

Because the use of the connect-history-api-fallback package has changed, use middleware when using browserSync: [historyApiFallback()]