gulp

安装gulp

1
npm i gulp gulp-cli -g

在当前themes下编译:

1
2
gulp sass
gulp build

文件目录(同级):

themes
├───css # css文件夹
├───js # js文件夹
├───images # images文件夹
├───fonts # fonts文件夹
├───gulpfile.js # gulp配置
├───fonts.list   # fonts导入列表
└───package.json

创建gulpfile.js文件(与package.json同级):

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
const {
task,
watch,
series,
src,
dest
} = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var googleWebFonts = require('gulp-google-webfonts');
var fs = require('fs');

function set_env(type) {
env = type || 'dev';
fs.writeFile("js/env.js", 'function ENV(){return"' + env + '"};', function (err) {
err && console.log(err);
});
}

// build
task('build', (done) => {
set_env(process.env.NODE_ENV);
return src('js/env.js')
.on('end', done);
});

//gulp scss
task('scss', (done) => {
return src([
'scss/**/*.scss',
'!./scss/import/**/*.scss',
])
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(dest('css'))
.on('end', done);
});

// gulp lib
task('lib', (done) => {
return src([
'./node_modules/echarts/dist/echarts.min.js',
'./node_modules/select2/dist/js/*2.min.js',
'./node_modules/select2/dist/css/*2.min.css',
])
.pipe(dest('js/lib'))
.on('end', done)
});

//gulp fonts
var options = {};
task('fonts', function () {
return src('./fonts.list')
.pipe(googleWebFonts(options))
.pipe(dest('fonts'))
.on('end', done);
});

//gulp watch
task('watch', () => {
watch(['scss/**/*.scss'], series('scss'));
});

//gulp scss:watch
task('scss:watch', (done) => {
watch(['scss/**/*.scss'], series('scss')).on('end', done);
});

gulp font, 先创建fonts.list文件(与gulpfile.js同级)

1
2
//  Google Font
Open Sans:300,400,600,700