gulp 实践
文档站YDoc 相关注意事项
sass 编译
目录结构
- 可以直接使用sass编译
➜ ydoc git:(v2) ✗ sass ./sass/app.scss ./template/source/app.css
当我们要不断修改sass查看预览效果,每次执行这个命令会很麻烦,这是我们需要添加watch功能 实时编译监听文件变动
- 使用 gulp 添加实时编译sass功能
考虑到ydoc只需要提供给使用方 编译之后的文件,因此gulp相关模块我们都将安装dev的依赖
- 首先确保你安装了 gulp
- 项目根目录下有gulpfile 文件
- sass 编译选择了基于node-sass 的 gulp-sass 模块
- 项目根目录下 安装gulp-sass 模块
npm install --save-dev gulp-sass
终版本需要合并并压缩css 和js
1.安装dev 时的依赖
npm install --save-dev gulp-minify-css
2.使用gulp 合并js css 文件
var gulp = require('gulp'),
concat = require('gulp-concat'),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify');
// 将所有css文件连接为一个文件并压缩,存到public/css
gulp.task('concatCss', function() {
console.log('concatCss');
gulp.src(['template/source/*.css'])
.pipe(concat('main.css'))
.pipe(minifyCss())
.pipe(gulp.dest('template/source'));
});
// 将所有js文件连接为一个文件并压缩,存到public/js
gulp.task('concatJs', function() {
console.log('concatJs');
gulp.src(['template/source/*.js'])
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('template/source'));
gulp.src(['template/source/*.css'])
.pipe(concat('main.css'))
.pipe(minifyCss())
.pipe(gulp.dest('template/source'));
});
这样·实现了 js 和css 的压缩 ,但是库文件引用顺序不对怎么办?
gulp如何 指定js css 文件合并的先后顺序
利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览
厚积薄发