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的文档编写过程中的实时解析和效果预览
http://segmentfault.com/a/1190000002583569
gulp 实践的更多相关文章
- gulp入门实践
前言:大家可能都听说过gulp,知道它是一种前端自动化开发工具,可以用来文件压缩.语法检查.文件合并和编译less等,但可能并不知道要怎么用?看过官方文档,也看过许多博客,但基本都是讲gulp的API ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- 基于gulp的前端自动化方案
前言 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...
- Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率
测试 目前主流的就bdd和tdd,自己查一下差异 推荐 mocha和tape 另外Jasmine也挺有名,angularjs用它,不过挺麻烦的,还有一个选择是qunit,最初是为jquery测试写的, ...
- gulp基础操作实践
按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...
- gulp系列:简单实践
coffescript测试源码 gulp = require('gulp') #删除 1.清空目录 常用插件 gulp-clean .del (nodejs模块) del = require('d ...
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
随机推荐
- c++模板注意事项
c++模板类 分类: C++2012-08-20 21:28 7108人阅读 评论(2) 收藏 举报 c++编译器instantiationiostreamlinker编程 c++模板类 分类: 数据 ...
- 【HDOJ】2103 Family planning
题目挺有意思.虽然不是很难. #include <stdio.h> int main() { unsigned int m, n, case_n; unsigned ; scanf(&qu ...
- JQuery对XML文件的操作
xml文件如下: <?xml version="1.0" encoding="utf-8" ?> <Root> <Parent&g ...
- BZOJ2348: [Baltic 2011]Plagiarism
2348: [Baltic 2011]Plagiarism Time Limit: 1 Sec Memory Limit: 256 MBSubmit: 304 Solved: 141[Submit ...
- [Swustoj 24] Max Area
Max Area 题目描述: 又是这道题,请不要惊讶,也许你已经见过了,那就请你再来做一遍吧.这可是wolf最骄傲的题目哦.在笛卡尔坐标系正半轴(x>=0,y>=0)上有n个点,给出了这些 ...
- Android中TextView输入字数统计和限制
在Android开发应用的时候,文本编辑框中最多输入140个字,经常会显示还剩多少字以限制用户输入的字数, EditText content;//定义一个文本输入框 TextView hasnum;/ ...
- 使用页面对象模型(pageFactory)
页面对象模型可以使测试脚本有更高癿可维护性,减少了重复癿代码,把页面抽象出来. 页面对象设计模式提供了测试一个接口,测试可以像用户行为一样来操作页面. 通过隐藏页面元素定位,返有劣将测试代码和页面分离 ...
- Effect-Compiler Tool(fxc.exe)
提前编译shader文件,提高运行时的效率. refer to http://msdn.microsoft.com/en-us/library/windows/desktop/bb509710%28v ...
- NULL指针 Void* 和野指针
在C和C++的语言中常常有这几个概念: NULL指针.空指针.Void *指针.野指针(Wild Pointer)甚至垂悬指针(Dangling Pointer). 1.NULL指针,一般用于指向一个 ...
- HDU5643-King's Game
BestCoder上的题,直接贴网站上的题目和题解了.很棒的题. 问题描述为了铭记历史,国王准备在阅兵的间隙玩约瑟夫游戏.它召来了 n(1≤n≤5000) 个士兵,逆时针围成一个圈,依次标号 1,2, ...