文档站YDoc 相关注意事项

sass 编译

目录结构

  1. 可以直接使用sass编译
➜  ydoc git:(v2) ✗ sass ./sass/app.scss ./template/source/app.css

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

  1. 使用 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

gulp 实践的更多相关文章

  1. gulp入门实践

    前言:大家可能都听说过gulp,知道它是一种前端自动化开发工具,可以用来文件压缩.语法检查.文件合并和编译less等,但可能并不知道要怎么用?看过官方文档,也看过许多博客,但基本都是讲gulp的API ...

  2. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  3. 基于gulp的前端自动化方案

    前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...

  4. Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率

    测试 目前主流的就bdd和tdd,自己查一下差异 推荐 mocha和tape 另外Jasmine也挺有名,angularjs用它,不过挺麻烦的,还有一个选择是qunit,最初是为jquery测试写的, ...

  5. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  6. gulp系列:简单实践

    coffescript测试源码   gulp = require('gulp') #删除 1.清空目录 常用插件 gulp-clean .del (nodejs模块) del = require('d ...

  7. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  8. gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  9. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

随机推荐

  1. FreeBSD方式安装 MAC OSX

    首先你的电脑需要支持硬件虚拟化,可以用securable进行检测,如图所示即为支持,说明可以再你电脑的虚拟机里面安装苹果系统,如果有其中一项为NO,那么不好意思,你就没法安装了 2 其次你的电脑要提前 ...

  2. BIOS与UEFI、MBR和GPT介绍

    操作步骤: UEFI是取代传统BIOS的,全称“统一的可扩展固件接口”.MBR则是传统的分区表类型,最大的缺点则是不支持容量大于2T的硬盘.GPT则弥补了MBR这个缺点,最大支持18EB的硬盘,是基于 ...

  3. 致改变——总结&规划(2016·一)

    今天是立夏,过完这一天意味着农历2016年的第一季度已经过去了,也意味着真正的夏天已经来了.如果说春天是作物的播种期的话,那夏天可以看做是作物的成长期,也是农民伯伯们最繁忙的时期.本文主要对自己过去的 ...

  4. OAuth 的权限问题与信息隐忧

    核心提示:以 QQ 登陆和微博登陆为代表的“一键登陆”背后不仅仅是登陆这么简单,它还默认获取了你的其他隐私资料和账号的部分使用权限,我们在享受便利的同时一定不要忘记保护好我们的个人信息安全. 去年3Q ...

  5. NEsper使用的事件类型 z

    NEsper使用的事件类型来描述事件的类型信息.你的应用在启动时可能预先配置定义事件类型,或者在运行时通过API或EPL语法动态的增加事件类型. EPL中的create schema 的语法允许在运行 ...

  6. HDU-1896 Stones

    http://acm.hdu.edu.cn/showproblem.php?pid=1896 题意:一个人从0开始走起,遇到偶数个石头就踢.要是同一位置有多个石头,则先扔最重的石头(也就是扔的最近的那 ...

  7. [摘]selenium-ide命令

    关于,selenium 命令这一部分,为了便于像我一样的菜鸟理解,我采用通过例子讲命令的方式. 菜鸟Selenium 命令通常被称为selenese,有一系列运行测试案例所需的命令构成. ----// ...

  8. .net软件自动化测试笔记(API-1)

    .net 软件测试自动化之道 API(Application Programming Interface)包括单元测试(Unit Testing),模块测试(Module Testing),组件测试( ...

  9. 曲面Shader

    这是一个能让平面呈现出曲面效果的Shaer. 代码: Shader "Custom/CurvedWorld"{ Properties { // Diffuse texture _M ...

  10. 华为过滤字符串(java)

    /*通过键盘输入一串小写字母(a~z)组成的字符串.请编写一个字符串过滤程序,若字符串中出现多个相同的字符,将非首次出现的字符过滤掉.比如字符串“abacacde”过滤结果为“abcde”.要求实现函 ...