react-redux-scss-start-kit/gulpfile.js at master · ucozlab/react-redux-scss-start-kit · 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
'use strict';

const
  gulp         = require('gulp'),
  sass         = require('gulp-sass'),
  cleanCSS     = require('gulp-clean-css'),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps   = require('gulp-sourcemaps'),
  webserver    = require('gulp-webserver'),
  wait         = require('gulp-wait'),
  concat       = require('gulp-concat'),
  uglify       = require('gulp-uglify'),
  babel        = require('gulp-babel'),
  gutil        = require('gulp-util'),
  fs           = require('fs'),
  path		   = require('path'),
  browserify   = require('browserify'),
  source       = require('vinyl-source-stream'),
  buffer       = require('vinyl-buffer'),
  livereload   = require('gulp-livereload'),
  connect      = require('gulp-connect'),
  nunjucks     = require('gulp-nunjucks'),
  nunjRender   = require('gulp-nunjucks-render'),
  moment	   = require('moment'),
  paths        = {
    scripts : [
      // './node_modules/jquery/dist/jquery.min.js',
      './src/js/**/*.js'
    ],
    scss: './src/scss/**/*.scss',
    html: './src/templates/**/*.html'
  };

gulp.task('compile-scss', function() {
  gulp.src('src/scss/style.scss').pipe(wait(100))
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 5 versions'],
      cascade: false
    }))
    // .pipe(cleanCSS({advanced : false}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./public/css/'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['compile-scss']);
  gulp.watch(paths.scripts, ['compile-js']);
  gulp.watch(paths.html, ['compile-html']);
});

gulp.task('watch-scss', function() {
  gulp.watch(paths.scss, ['compile-scss']);
});

gulp.task('compile-js', function() {
  browserify({
    entries: './src/js/main.js',
    debug: true
  })
    .transform("babelify", {
      presets: ["es2015"]
    })
    .bundle()
    .on('error', gutil.log)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest(`./public/js/`))
    .pipe(livereload());
});

gulp.task('compile-html', () =>
  gulp.src(paths.html)
    .pipe(nunjRender({
      path: ['./src/templates/'] // String or Array
    }))
    .pipe(nunjucks.compile({name: 'Sindre'}))
    .pipe(gulp.dest('./public/'))
);

gulp.task('webserver', function() {
  gulp.src('./public')
    .pipe(webserver({
      livereload: true,
      fallback: "./index.html",
      port: 1080,
      // open: true
    }));
});

gulp.task('connect', function() {
  connect.server({
    root: './public',
    port: '8000',
    livereload: true
  });
});

gulp.task('generateIndex', function() {
    let now = new Date();
    let html = "<html><head><link rel='stylesheet' href='index.css' /><title>Design Index</title></head><body><h1>Design Index</h1><span class='generated'>Generated by gulp task at " + moment().format("LLL") + "</span><hr /><ul>";
    fs.readdir('./public/', (err, files) => {
        files.forEach(file => {
            if(path.extname(file) === ".html") {
                html += "<li><a href='./" + file + "'>" + file + "</a></li>";
            }
        });
        html += "</ul><hr /><footer>Generation of Index file completed in " + (new Date() - now) + " milliseconds</footer></body></html>";
        fs.writeFile('./public/html/all.html', html, (err) => {
            if(err) throw err;
            console.log('all.html generation complete.');
        });
    });
});

//Watch task
gulp.task('default', ['webserver', 'generateIndex', 'compile-scss', 'compile-html', 'watch'] );
gulp.task('build', ['compile-scss', 'compile-js', 'compile-html'] );