文档站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. c++模板注意事项

    c++模板类 分类: C++2012-08-20 21:28 7108人阅读 评论(2) 收藏 举报 c++编译器instantiationiostreamlinker编程 c++模板类 分类: 数据 ...

  2. 【HDOJ】2103 Family planning

    题目挺有意思.虽然不是很难. #include <stdio.h> int main() { unsigned int m, n, case_n; unsigned ; scanf(&qu ...

  3. JQuery对XML文件的操作

    xml文件如下: <?xml version="1.0" encoding="utf-8" ?> <Root> <Parent&g ...

  4. BZOJ2348: [Baltic 2011]Plagiarism

    2348: [Baltic 2011]Plagiarism Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 304  Solved: 141[Submit ...

  5. [Swustoj 24] Max Area

    Max Area 题目描述: 又是这道题,请不要惊讶,也许你已经见过了,那就请你再来做一遍吧.这可是wolf最骄傲的题目哦.在笛卡尔坐标系正半轴(x>=0,y>=0)上有n个点,给出了这些 ...

  6. Android中TextView输入字数统计和限制

    在Android开发应用的时候,文本编辑框中最多输入140个字,经常会显示还剩多少字以限制用户输入的字数, EditText content;//定义一个文本输入框 TextView hasnum;/ ...

  7. 使用页面对象模型(pageFactory)

    页面对象模型可以使测试脚本有更高癿可维护性,减少了重复癿代码,把页面抽象出来. 页面对象设计模式提供了测试一个接口,测试可以像用户行为一样来操作页面. 通过隐藏页面元素定位,返有劣将测试代码和页面分离 ...

  8. Effect-Compiler Tool(fxc.exe)

    提前编译shader文件,提高运行时的效率. refer to http://msdn.microsoft.com/en-us/library/windows/desktop/bb509710%28v ...

  9. NULL指针 Void* 和野指针

    在C和C++的语言中常常有这几个概念: NULL指针.空指针.Void *指针.野指针(Wild Pointer)甚至垂悬指针(Dangling Pointer). 1.NULL指针,一般用于指向一个 ...

  10. HDU5643-King's Game

    BestCoder上的题,直接贴网站上的题目和题解了.很棒的题. 问题描述为了铭记历史,国王准备在阅兵的间隙玩约瑟夫游戏.它召来了 n(1≤n≤5000) 个士兵,逆时针围成一个圈,依次标号 1,2, ...