ngExample/gulpfile.coffee at master · PingoUPB/ngExample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
#
# Gulpfile with:
#
# - Slim
# - Sass
# - Lint
# - Browsersync
# - CSS and HTML compression
#
# Install dependencies:
#
#   $ npm install gulp gulp-concat gulp-uglify event-stream gulp-coffee gulp-sass gulp-cssmin gulp-coffee gulp-coffeelint browser-sync gulp-util gulp-shell
#
# Then start developing:
#
#   $ gulp
#
gulp        = require 'gulp'
concat      = require 'gulp-concat'
es          = require('event-stream')
sass        = require 'gulp-sass'
uglify      = require 'gulp-uglify'
streamqueue = require 'streamqueue' # Preserves file order (vendor...)
coffee      = require 'gulp-coffee'
gutil       = require 'gulp-util'
shell       = require 'gulp-shell'
cssmin      = require 'gulp-cssmin'
coffeelint  = require 'gulp-coffeelint'
browserSync = require 'browser-sync'

isProd = gutil.env.type is 'prod'

sources =
  sass: 'src/css/main.scss'
  watchscss: 'src/css/**/*.scss'
  css: 'src/css/**/*.css'
  html: 'src/**/*.html'
  js: 'src/js/**/*.js'
  coffee: 'src/js/**/*.coffee'
  images: 'src/images/**/*.{png,jpg,svg,gif}'

targets =
  css: 'www/css'
  html: 'www/'
  js: 'www/js'
  images: 'www/images'

# Check for errors
gulp.task 'lint', ->
  gulp.src(sources.js)
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())

# Compile Coffeescript
gulp.task 'js', ->
  stream = streamqueue(objectMode: true)
  # Vendor files
  stream.queue(gulp.src(sources.js))
  # App files use Coffee
  stream.queue(gulp.src(sources.coffee).pipe(coffee(bare:true, onError: browserSync.notify)))
  stream.done()
    .pipe(concat("all.js"))
    .pipe(if isProd then uglify(onError: gutil.log) else gutil.noop())
    .pipe(gulp.dest(targets.js))
    .pipe(browserSync.reload({stream: true}))

# Copy HTML
gulp.task 'html', ->
  gulp.src(sources.html)
    .pipe(gulp.dest(targets.html))

# Copy images
gulp.task 'images', ->
  gulp.src(sources.images)
    .pipe(gulp.dest(targets.images))

# Compile CSS
gulp.task 'css', ->
  stream = streamqueue(objectMode: true)
  # Vendor files
  stream.queue(gulp.src(sources.css))
  # App files
  stream.queue(gulp.src(sources.sass).pipe(sass({
    style: 'expanded',
    onError: browserSync.notify
  }))
  .pipe(autoprefix({
      browsers: ['last 2 versions'],
      cascade: false
  })))
  stream.done()
    .pipe(concat("all.css"))
    .pipe(if isProd then cssmin(onError: gutil.log) else gutil.noop())
    .pipe(gulp.dest(targets.css))
    .pipe(browserSync.reload({stream: true}))

# Reload browser
gulp.task 'server', ->
  browserSync(
    open: true
    server:
      baseDir: targets.html
    reloadDelay: 2000 # Prevent white screen of death
    watchOptions:
      debounceDelay: 1000
  )

# Watch files for changes
gulp.task 'watch', ->
  gulp.watch sources.coffee, ['js']
  gulp.watch sources.js, ['js']
  gulp.watch sources.css, ['css']
  gulp.watch sources.watchscss, ['css']
  gulp.watch sources.html, ['html']
  gulp.watch sources.images, ['images']
  gulp.watch 'www/**/*.html', (file) ->
    browserSync.reload(file.path) if file.type is "changed"

# Build everything
gulp.task 'build', ['lint', 'js', 'css', 'html', 'images']

# Start a server and watch for file changes
gulp.task 'default', ['watch', 'server']