最近做项目,因为每次做完后都要手动压缩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 处理前端工作流程的更多相关文章

  1. Yeoman+Bower+gulp web前端自动化工作流程(初级教程)

    Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...

  2. 前端发展态势 && 前端工作流程个人浅析

    于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...

  3. 前端工作流程自动化——Grunt/Gulp 自动化

    什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...

  4. 如何利用gulp构建前端自动化

    1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若 ...

  5. 写了交互给后台后来不能用?bug多多多又找不到文件效率低?工作流程帮你优化起来~~~~

    前端工作流程(多方交互篇) 新的网页: 1.跟美工沟通,跟产品沟通,跟后台沟通.前两者主要是页面样式.后者主要是表单交互.用哪个框架之类的. 2.实现.(写清楚哪块是用什么验证方式的)→ 给后台. 3 ...

  6. gulp——用自动化构建工具增强你的工作流程

    想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...

  7. Git 分支-利用分支进行开发的工作流程

    3.4 Git 分支 - 利用分支进行开发的工作流程 利用分支进行开发的工作流程 现在我们已经学会了新建分支和合并分支,可以(或应该)用它来做点什么呢?在本节,我们会介绍一些利用分支进行开发的工作流程 ...

  8. Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载???

    1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...

  9. 前端工作面试问题--摘取自github

    前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...

随机推荐

  1. PC缺少一个或多个网络协议 qq可登录(win10)

    打开适配器连接 1打开网络适配器   2卸载microsoft  3 网络客户端   4重启

  2. 关于listview排序的说明

    增加了排序属性后(即设置ListViewItemSorter属性),即便是把listview的内容全部清掉(listView.Items.Clear()),然后再重新添加行(listView.Item ...

  3. 构建一个简单的WCF应用——WCF学习笔记(1)

    通过<WCF全面解析>来知识分享....感谢蒋金楠老师@Artech 一.VS中构建解决方案   Client一个控制台程序模拟的客户端,引用Service.ServiceModel.dl ...

  4. VHDL:信号、端口以及和Verilog的区别

    1.信号 信号是描述硬件系统的基本数据对象,它的性质类似于连接线.信号可以作为设计实 体中并行语句模块间的信息交流通道.      信号作为一种数值容器,不但可以容纳当前值,也可以保持历史值(这决定于 ...

  5. WOJ-1097

    Description JYY has placed N bombs on the plane. We assume that the firepower area of each bomb is c ...

  6. MySQL安装及主从配置

    系统环境:CentOS release 6.5 (Final)(最小化安装) MySQL版本:mysql-5.6.12 Cmake版本:cmake-2.8.4 说明:安装mysql先安装cmake(原 ...

  7. [JSOI2008][BZOJ1012] 最大数(动态开点线段树)

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度. 2. 插入操作 ...

  8. Boot loader: Grub进阶[转]

    Boot loader: Grub进阶 本文记录grub的一些进阶配置 关於核心功能当中的 vga 配置 事实上,你的 tty1~tty6 除了 80x24 的解析度外,还能够有其他解析度的支持喔!但 ...

  9. Mac下Nginx环境配置

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 终端执行: brew search nginx brew install nginx 当前版本 ...

  10. Zookeeper安装指南

    第一步:修改conf目录下面的 zoo_sample.cfg修改为zoo.cfg tickTime=2000 # The number of ticks that the initial # sync ...