依旧先上官方链接 https://www.gulpjs.com.cn/docs/getting-started/
安装
这里比较清楚,按照入门指南来
- 全局安装 gulp:
npm install --global gulp
- 作为项目的开发依赖(devDependencies)安装:
npm install --save-dev gulp
- 在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
- 运行 gulp:
gulp
效果图如下,博主使用的是上次生成主题的项目,这里项目并无特殊限制
打包主题
参考了gulb中文网,在一个任务中使用多个文件来源,代码如下:
// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
var merge = require('merge-stream');
gulp.task('css-wrap', function () {
var css = gulp.src(path.resolve('./theme/index.css'))
/* 找需要添加命名空间的css文件,支持正则表达式 */
.pipe(cssWrap({ selector: '.custom-FF0033' /* 添加的命名空间 */ }))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/theme/FF0033'))
/* 存放的目录 */
var font = gulp.src('./theme/fonts/**')
.pipe(gulp.dest('assets/theme/FF0033/fonts'));
return merge(css, font)
});
注:在运行代码前需要安装
npm install --save-dev gulp merge-stream // 安装merge-stream
npm install gulp-clean-css //安装gulp-clean-css
npm install gulp-css-wrap //安装gulp-css-wrap
运行结果如下图。