1 | const banner = [
|
2 | '/**',
|
3 | ' * <%= pkg.name %> - <%= pkg.description %>',
|
4 | ' * @version v<%= pkg.version %>',
|
5 | ' * @link <%= pkg.homepage %>',
|
6 | ' * @license <%= pkg.license %>',
|
7 | ' */',
|
8 | ''
|
9 | ].join('\n')
|
10 | const autoprefixer = require('autoprefixer')
|
11 | const browserSync = require('browser-sync').create()
|
12 | const concat = require('gulp-concat')
|
13 | const del = require('del')
|
14 | const ghPages = require('gulp-gh-pages')
|
15 | const gulp = require('gulp')
|
16 | const header = require('gulp-header')
|
17 | const mqpacker = require('css-mqpacker')
|
18 | const nano = require('gulp-cssnano')
|
19 | const notify = require('gulp-notify')
|
20 | const pkg = require('./package.json')
|
21 | const plumber = require('gulp-plumber')
|
22 | const postcss = require('gulp-postcss')
|
23 | const rename = require('gulp-rename')
|
24 | const runSequence = require('run-sequence')
|
25 | const sass = require('gulp-sass')
|
26 | const sassGlob = require('gulp-sass-glob')
|
27 | const sourcemaps = require('gulp-sourcemaps')
|
28 | const standard = require('gulp-standard')
|
29 | const uglify = require('gulp-uglify')
|
30 | const webpack = require('webpack-stream')
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | gulp.task('clean', () => {
|
37 | return del(['**/.DS_Store', './build/*', './dist/*'])
|
38 | })
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | gulp.task('scripts', () => {
|
45 | return gulp
|
46 | .src(['./src/scripts/what-input.js'])
|
47 | .pipe(standard())
|
48 | .pipe(
|
49 | standard.reporter('default', {
|
50 | breakOnError: true,
|
51 | quiet: false
|
52 | })
|
53 | )
|
54 | .pipe(
|
55 | webpack({
|
56 | module: {
|
57 | loaders: [
|
58 | {
|
59 | test: /.jsx?$/,
|
60 | loader: 'babel-loader',
|
61 | exclude: /node_modules/,
|
62 | query: {
|
63 | presets: ['env']
|
64 | }
|
65 | }
|
66 | ]
|
67 | },
|
68 | output: {
|
69 | chunkFilename: '[name].js',
|
70 | library: 'whatInput',
|
71 | libraryTarget: 'umd',
|
72 | umdNamedDefine: true
|
73 | }
|
74 | })
|
75 | )
|
76 | .pipe(rename('what-input.js'))
|
77 | .pipe(header(banner, { pkg: pkg }))
|
78 | .pipe(gulp.dest('./dist/'))
|
79 | .pipe(gulp.dest('./build/scripts/'))
|
80 | .pipe(uglify())
|
81 | .pipe(
|
82 | rename({
|
83 | suffix: '.min'
|
84 | })
|
85 | )
|
86 | .pipe(header(banner, { pkg: pkg }))
|
87 | .pipe(gulp.dest('./dist/'))
|
88 | .pipe(notify('Build complete'))
|
89 | })
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | gulp.task('styles', () => {
|
96 | let processors = [
|
97 | autoprefixer({
|
98 | browsers: ['last 3 versions', '> 1%', 'ie >= 10']
|
99 | }),
|
100 | mqpacker({
|
101 | sort: true
|
102 | })
|
103 | ]
|
104 |
|
105 | return gulp
|
106 | .src(['./src/styles/index.scss'])
|
107 | .pipe(
|
108 | plumber({
|
109 | errorHandler: notify.onError('Error: <%= error.message %>')
|
110 | })
|
111 | )
|
112 | .pipe(sourcemaps.init())
|
113 | .pipe(sassGlob())
|
114 | .pipe(sass())
|
115 | .pipe(postcss(processors))
|
116 | .pipe(
|
117 | nano({
|
118 | minifySelectors: false,
|
119 | reduceIdents: false,
|
120 | zindex: false
|
121 | })
|
122 | )
|
123 | .pipe(sourcemaps.write('maps'))
|
124 | .pipe(gulp.dest('./build/styles'))
|
125 | .pipe(browserSync.stream())
|
126 | .pipe(notify('Styles task complete'))
|
127 | })
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | gulp.task('images', () => {
|
134 | return gulp.src(['./src/images/**/*']).pipe(gulp.dest('./build/images'))
|
135 | })
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 | gulp.task('markup', () => {
|
142 | return gulp.src(['./src/markup/*']).pipe(gulp.dest('./build'))
|
143 | })
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 | gulp.task('deploy', () => {
|
150 | return gulp.src('./build/**/*').pipe(ghPages())
|
151 | })
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 | gulp.task('default', () => {
|
158 | runSequence('clean', ['markup', 'scripts', 'styles', 'images'], () => {
|
159 | browserSync.init({
|
160 | server: {
|
161 | baseDir: './build/'
|
162 | }
|
163 | })
|
164 |
|
165 | gulp
|
166 | .watch(
|
167 | ['./src/scripts/what-input.js', './src/scripts/polyfills/*.js'],
|
168 | ['scripts']
|
169 | )
|
170 | .on('change', browserSync.reload)
|
171 |
|
172 | gulp.watch(['./src/styles/{,*/}{,*/}*.scss'], ['styles'])
|
173 |
|
174 | gulp
|
175 | .watch(['./src/markup/*.html'], ['markup'])
|
176 | .on('change', browserSync.reload)
|
177 | })
|
178 | })
|