利用 Gulp 处理前端工作流程
最近做项目,因为每次做完后都要手动压缩CSS、JS 等文件,压缩后另存为 *.min.xxx。 Less 还要手动输入命令进行编译,调整页面也经常要手动刷新页面看效果,很麻烦,就尝试用 gulp 去处理下我的工作流程,让事情变得更加简单可靠。
首先要先确保 node、npm 已经安装到电脑里。
// 全局安装
$ npm install --global gulp
// 作为项目的开发依赖安装
$ npm install --save-dev gulp
// 在项目的根目录下 创建 gulpfile.js
// 然后运行 gulp 即可完成
$ gulp
1、构建实时重载的服务器
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload; gulp.task('serve',function(){
// 非服务器环境下
browserSync({
server:{
// 需要监控的目录
baseDir:'index'
}
});
// 服务器环境下
browserSync.init({
proxy:'localhost/index.php',
});
// 监视文件内容
gulp.watch(['*.html','static/style/*.less','static/script/*.js'],{cwd:'index'},reload);
});
$ gulp serve //启动服务
2、自动压缩 JavaScript文件
var rename = require('gulp-rename');
var uglify = require('gulp-uglify'); // 设置输出目录
var DEST = 'my';
gulp.task('out',function(){
// 指定 JS 文件
return gulp.src('index/**/**/common.js')
// 输出 JS 文件
.pipe(gulp.dest(DEST))
// 压缩 JS 文件
.pipe(uglify())
// 重命名被压缩的 JS 文件
.pipe(rename({extname:'.min.js'}))
// 输出被压缩的 JS 文件
.pipe(gulp.dest(DEST));
});
$ gulp out //执行压缩 JS
3、自动编译 .less => .css
var less = require('gulp-less');
// 设置输出目录
var DEST = 'my'; gulp.task('less',function(){
gulp.src('index/**/**/*.less')
.pipe(less({compress:true}))
.pipe(gulp.dest(DEST));
});
$ gulp less //执行编译 less
4、自动编译 .scss => .css
gulp.task('sass',function(){
return gulp.src('./style.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sass //执行编译 sass
利用 Gulp 处理前端工作流程的更多相关文章
- Yeoman+Bower+gulp web前端自动化工作流程(初级教程)
Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...
- 前端发展态势 && 前端工作流程个人浅析
于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...
- 前端工作流程自动化——Grunt/Gulp 自动化
什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...
- 如何利用gulp构建前端自动化
1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...
- 写了交互给后台后来不能用?bug多多多又找不到文件效率低?工作流程帮你优化起来~~~~
前端工作流程(多方交互篇) 新的网页: 1.跟美工沟通,跟产品沟通,跟后台沟通.前两者主要是页面样式.后者主要是表单交互.用哪个框架之类的. 2.实现.(写清楚哪块是用什么验证方式的)→ 给后台. 3 ...
- gulp——用自动化构建工具增强你的工作流程
想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...
- Git 分支-利用分支进行开发的工作流程
3.4 Git 分支 - 利用分支进行开发的工作流程 利用分支进行开发的工作流程 现在我们已经学会了新建分支和合并分支,可以(或应该)用它来做点什么呢?在本节,我们会介绍一些利用分支进行开发的工作流程 ...
- Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载???
1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...
- 前端工作面试问题--摘取自github
前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...
随机推荐
- PC缺少一个或多个网络协议 qq可登录(win10)
打开适配器连接 1打开网络适配器 2卸载microsoft 3 网络客户端 4重启
- 关于listview排序的说明
增加了排序属性后(即设置ListViewItemSorter属性),即便是把listview的内容全部清掉(listView.Items.Clear()),然后再重新添加行(listView.Item ...
- 构建一个简单的WCF应用——WCF学习笔记(1)
通过<WCF全面解析>来知识分享....感谢蒋金楠老师@Artech 一.VS中构建解决方案 Client一个控制台程序模拟的客户端,引用Service.ServiceModel.dl ...
- VHDL:信号、端口以及和Verilog的区别
1.信号 信号是描述硬件系统的基本数据对象,它的性质类似于连接线.信号可以作为设计实 体中并行语句模块间的信息交流通道. 信号作为一种数值容器,不但可以容纳当前值,也可以保持历史值(这决定于 ...
- WOJ-1097
Description JYY has placed N bombs on the plane. We assume that the firepower area of each bomb is c ...
- MySQL安装及主从配置
系统环境:CentOS release 6.5 (Final)(最小化安装) MySQL版本:mysql-5.6.12 Cmake版本:cmake-2.8.4 说明:安装mysql先安装cmake(原 ...
- [JSOI2008][BZOJ1012] 最大数(动态开点线段树)
题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度. 2. 插入操作 ...
- Boot loader: Grub进阶[转]
Boot loader: Grub进阶 本文记录grub的一些进阶配置 关於核心功能当中的 vga 配置 事实上,你的 tty1~tty6 除了 80x24 的解析度外,还能够有其他解析度的支持喔!但 ...
- Mac下Nginx环境配置
环境信息: Mac OS X 10.11.1 Homebrew 0.9.5 正文 一.安装 Nginx 终端执行: brew search nginx brew install nginx 当前版本 ...
- Zookeeper安装指南
第一步:修改conf目录下面的 zoo_sample.cfg修改为zoo.cfg tickTime=2000 # The number of ticks that the initial # sync ...