gulp 实践

文档站YDoc 相关注意事项

sass 编译

目录结构

1. 可以直接使用sass编译

➜  ydoc git:(v2) ✗ sass ./sass/app.scss ./template/source/app.css

当我们要不断修改sass查看预览效果，每次执行这个命令会很麻烦，这是我们需要添加watch功能 实时编译监听文件变动

2. 使用 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的文档编写过程中的实时解析和效果预览

http://segmentfault.com/a/1190000002583569