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的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
随机推荐
- 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 ...
- 【HDOJ】5046 Airport
DLX简单题目. /* 5046 */ #include <iostream> #include <string> #include <map> #include ...
- [转] 弱校ACM奋斗史
转载来自:http://blog.163.com/lx_zz0o0/blog/static/236205116201442604234538/ 弱校ACM奋斗史 2014-05-26 00:42:3 ...
- codeigniter实现ajax分页
<?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Pagination{ public function __c ...
- 在Eclipse中使用Github(EGit)
安装配置EGit 1. 安装Windows版的Git,登陆Github账号,登陆成功后会自动在本地和Github配置好密钥 2. 在Eclipse中安装EGit,地址http://download.e ...
- HDU 1061
#include<stdio.h> #include<string.h> int a[10]; int main() { int T,n,i,k,temp,b,t; scanf ...
- 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 ...
- 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 ...
- strust1.x中formbean的原理及作用
from: http://blog.csdn.net/tuiroger/article/details/3947896 今天张老师讲了一些比较重要的strust标签,<html:link ...
- 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个数 -> ...