gulp-dev/gulpfile.js at master · Badgerswork/gulp-dev · 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

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-compass gulp-plumber gulp-autoprefixer gulp-cssnano gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-kss gulp-notify gulp-cache gulp-livereload gulp-connect gulp-clean del --save-dev

 */

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    compass = require('gulp-compass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    gulpkss = require('gulp-kss'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    connect = require('gulp-connect'),
    clean = require('gulp-clean'),
    del = require('del');

    gulp.task('webserver', function() {
      connect.server({
          livereload: true
      });
    });

    gulp.task('styles', function() {
        return gulp.src('./scss/*.scss')

        .pipe(plumber({ errorHandler: function (error) {console.log(error.message); this.emit('end');}}))
        .pipe(compass({css: 'app/assets/css', sass: 'app/assets/scss', image: 'app/assets/images', require: ['susy'] }))
        .on('error', function(err) {
          // Would like to catch the error here
        })

        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(notify({ message: 'Styles task complete' }));

    });

    gulp.task('scripts', function() {
        return gulp.src('src/scripts/**/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/assets/js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'))
        .pipe(notify({ message: 'Scripts task complete' }));
    });

    gulp.task('images', function() {
        return gulp.src('../app/assets/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/assets/img'))
        .pipe(notify({ message: 'Images task complete' }));
    });


    // Clean
    gulp.task('clean', function() {
      return del(['dist/styles', 'dist/scripts', 'dist/images']);
    });


    //KSS
    var themeFolder = __dirname + '/app/assets/styleguide/';
    var templateFolder = __dirname + '/dist/assets/styleguide/template/';
    gulp.task('styleguide', function () {
        gulp.src(templateFolder)
        .pipe(gulpkss({
            overview: themeFolder + 'styleguide.md',
            templateDirectory: templateFolder
        }))
        .pipe(gulp.dest('/dist/assets/styleguide/'));

        // Concat and compile all your styles for correct rendering of the styleguide.
        gulp.src( themeFolder +'**/*.scss')
            .pipe(compass({css: 'dist/assets/styleguide/public/', sass: 'app/assets/styleguide/scss', require: ['susy'] }))
    });

    // Default task
    gulp.task('default',['webserver', 'clean'],  function() {
      gulp.start('styles', 'scripts', 'images', 'styleguide');
    });

    // Watch
    gulp.task('watch', function() {

      // Watch .scss files
      gulp.watch('app/assets/scss/**/*.scss', ['styles']);

      // Watch .js files
      gulp.watch('app/assets/scripts/**/*.js', ['scripts']);

      // Watch image files
      gulp.watch('app/assets/images/**/*', ['images']);

      // Create LiveReload server
      livereload.listen();

      // Watch any files in dist/, reload on change
      gulp.watch(['app/assets/**']).on('change', livereload.changed);

    });