front-editor/gulpfile.js at master · forkzch/front-editor · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* Configuration of entry points and paths for all tasks */
const config = {

    editorStyles: {
        src: 'src/scss/**/*.scss',
        dest: 'assets/css',
        file: 'bfe-editor-style.css',
        watchSrc: 'src/scss/**/*.scss',
    },

    scripts: {
        src: [
            'src/js/vendors/*.js',
            'src/js/inc/*.js',
            'src/js/*.js',
        ],
        dest: 'assets/js',
        file: 'bfee-editor.js'
    },

    gutenbergBlock: {
        src: [
            'src/js/vendors/*.js',
            'src/js/inc/*.js',
            'src/js/block/*.js',
        ],
        dest: 'assets/js/block',
        file: 'bfee-block.js'
    }
};

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');

const sassGlob = require('gulp-sass-glob');
const sass = require('gulp-sass');

const postcss = require('gulp-postcss');
const gulpStylelint = require('gulp-stylelint');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
// post-css plugin to solve object-fit polyfill requirements
const objectFitImages = require('postcss-object-fit-images');
const loadSVG = require('postcss-inline-svg');

// use these if you need less support instead, also run `npm install --save-dev gulp-less gulp-less-glob`
// const lessGlob = require('gulp-less-glob');
// const less = require('gulp-less');

const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default; // we use ES6 compatible minifier for future :)

/* Used to work with @import '~bootstrap' tilda notation meaning it should lookup at node_modules via includePaths */
const sassTildeImporter = (url, prev, done) => {
    return (url[0] === '~') ? { file: url.substr(1) } : null;
};


/*
*  Our tasks definitions go below
*/

gulp.task('editor-styles', () => {
    return gulp.src(config.editorStyles.src)
        .pipe(sourcemaps.init())
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sassGlob())
        .pipe(sass({
            includePaths: ['node_modules'],
            importer: sassTildeImporter
        }))
        .pipe(concat(config.editorStyles.file))
        .pipe(postcss([
            objectFitImages,
            autoprefixer,
            cssnano
        ]))
        .pipe(sourcemaps.write('.'))

        .pipe(gulp.dest(config.editorStyles.dest));
});

gulp.task('scripts', () => {
    return gulp.src(config.scripts.src)
        .pipe(sourcemaps.init())
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(babel({
            presets: ['@babel/env'],
            sourceType: 'unambiguous',
        }))
        .pipe(concat(config.scripts.file))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.scripts.dest));
});

/**
 * guthenberg block js converting jsx to
 */
gulp.task('gutenberg-block', function () {
    return gulp.src(config.gutenbergBlock.src)
        .pipe(sourcemaps.init())
        .pipe(babel({
            plugins: ['@babel/plugin-transform-react-jsx'],
            presets: ['@babel/env'],
            sourceType: 'unambiguous',
        }))
        .pipe(concat(config.gutenbergBlock.file))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.gutenbergBlock.dest))
});


/* watch tasks definitions */
gulp.task('watch:editor-styles', () => gulp.watch(config.editorStyles.watchSrc, gulp.series('editor-styles')));
gulp.task('watch:scripts', () => gulp.watch(config.scripts.src, gulp.series('scripts')));
gulp.task('watch:gutenberg-block', () => gulp.watch(config.gutenbergBlock.src, gulp.series('gutenberg-block')));


gulp.task('watch',
    gulp.series(
        gulp.parallel( 'watch:editor-styles', 'watch:scripts', 'watch:gutenberg-block')
    )
);


gulp.task('default', gulp.parallel('editor-styles', 'scripts', 'gutenberg-block'));