文档站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. Styles and Themens(5)样式文件Style.xml中各元素的含义

    Style Resource See also Styles and Themes A style resource defines the format and look for a UI. A s ...

  2. 【HDOJ】5046 Airport

    DLX简单题目. /* 5046 */ #include <iostream> #include <string> #include <map> #include ...

  3. [转] 弱校ACM奋斗史

    转载来自:http://blog.163.com/lx_zz0o0/blog/static/236205116201442604234538/ 弱校ACM奋斗史  2014-05-26 00:42:3 ...

  4. codeigniter实现ajax分页

    <?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Pagination{ public function __c ...

  5. 在Eclipse中使用Github(EGit)

    安装配置EGit 1. 安装Windows版的Git,登陆Github账号,登陆成功后会自动在本地和Github配置好密钥 2. 在Eclipse中安装EGit,地址http://download.e ...

  6. HDU 1061

    #include<stdio.h> #include<string.h> int a[10]; int main() { int T,n,i,k,temp,b,t; scanf ...

  7. Installing your app on your Windows RT device

    Alright… so my app is almost finished and I want to install it for real on my Surface tablet. How do ...

  8. Configuring Active Directory Federation Services 2.0 (配置 adfs 2.0) -摘自网络

    Active Directory Federation Services (AD FS) 2.0 makes it possible to deploy a federation server and ...

  9. strust1.x中formbean的原理及作用

    from:     http://blog.csdn.net/tuiroger/article/details/3947896 今天张老师讲了一些比较重要的strust标签,<html:link ...

  10. HDU 5464 ( Clarke and problem ) (dp)

    dp[i][j] := 前i个数和为j的情况(mod p) dp[i][j] 分两种情况 1.不选取第i个数 -> dp[i][j] = dp[i-1][j] 2.   选取第i个数 -> ...