gulp系列:简单实践
gulp = require('gulp')
#删除 1、清空目录 常用插件 gulp-clean 、del (nodejs模块)
del = require('del')
#2、文件复制 原生模块gulp,插件:gulp-cpoy
#3、JS压缩 插件:gulp-uglify
uglify = require('gulp-uglify')
#4、CSS压缩 插件:gulp-minify-css,gulp-uncss
minifycss = require('gulp-minify-css')
#去掉无用的css
uncss = require('gulp-uncss')
#5、html压缩
minifyhtml = require('gulp-minify-html')
#6、文件合并 插件:gulp-minify-css,gulp-uncss
concat = require('gulp-concat')
#7、浏览器刷新
browserSync = require('browser-sync').create()
#8 监视 插件:gulp-watch 原生模块:gulp
gulp.task('default', ['clean','miniCSS','miniJS','miniHTML'], ->
)
#9、其他 yargs gulp-notify通知 gulp-util
# run-sequence异步同步执行任务[],[]中括号内为异步,两个括号件为同步
gulp.task('clean', (callback)->
#这种写法比较清晰
# del(['./dest/*.html','./dest/js/.js','./dest/css/**/*.css'], callback)
#比较简洁的写法,类似正则
del('./dest/**/.{html,js.css}', callback)
#注意点:不能使用/dest/css/**这种写法,经过多次测试,这才文件拷贝的时候会发生以下两种错误
# Error: ENOENT: no such file or directory
# Error: EEXIST: file already exists, mkdir
return
)
gulp.task('miniCSS', ->
gulp.src('src/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('dest/css/'))
return
)
gulp.task('miniJS', ->
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dest/js/'))
)
gulp.task('miniHTML',->
gulp.src('src/*.html')
.pipe(minifyhtml())
.pipe(gulp.dest('dest/'))
)
#gulp.task('server',['clean'], ->
# browserSync.init({
# baseDir: 'dest/',
# },
# port: 5000
# )
# gulp.watch(['./src/**/*.js','./src/**/*.css'],['watch'])
# return
#)
#gulp.task('watch', ['miniCSS','miniJS','copyhtml'],->
# browserSync.reload();
# return
#)
gulp系列:简单实践的更多相关文章
- 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列 (二):为什么选择gulp
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- gulp-notify处理报错----gulp系列(二)
上一节,以less为例,入门了gulp,并为任务结构做了抽离. 前端们,gulp该用起来了,简单的demo入门——gulp系列(一) 本节学习下gulp-notify,官方这样解释的: gulp-no ...
- kafka原理和实践(二)spring-kafka简单实践
系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 前端构建大法 Gulp 系列 (四):gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...
- 前端构建大法 Gulp 系列 (一):为什么需要前端构建
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- Thrift简单实践
0.什么是RPC RPC(Remote Procedure Call - 远程过程调用),是通过网络从远程计算机上请求服务,而不需要了解底层网路技术的细节.简单点说,就是像调用本地服务(方法)一样调用 ...
- Java 异步处理简单实践
Java 异步处理简单实践 http://www.cnblogs.com/fangfan/p/4047932.html 同步与异步 通常同步意味着一个任务的某个处理过程会对多个线程在用串行化处理,而异 ...
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
随机推荐
- java.lang.IllegalStateException: Failed to read Class-Path attribute from manifest of jar file:/XXX
出现这个问题的解决方案就是将原有的jar删除 然后重新下载过一遍就可以使用了 我估计是元数据等损坏了
- Oracle的AWR报告分析
* 定义:awr报告是oracle 10g下提供的一种性能收集和分析工具,它能提供一个时间段内整个系统资源使用情况的报告,通过这个报告,我们就可以了解一个系统的整个运行情况,这就像一个人全面的体检报告 ...
- tomcat 7下spring 4.x mvc集成websocket以及sockjs完全参考指南
之所以sockjs会存在,说得不好听点,就是因为微软是个流氓,现在使用windows 7的系统仍然有近半,而windows 7默认自带的是ie 8,有些会自动更新到ie 9,但是大部分非IT用户其实都 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
- javascript --- 原型初探七日谈(三)
原型陷阱: 在处理原型问题上时,我们要注意两种行为. 1. 当我们对原型对象执行完全替换的时候,有可能会触发原型链的某种异常. 2. prototype.constructor 属性是不可靠的. 下面 ...
- SharePoint 2013 和卷影复制服务(VSS)概述
对备份供应商而言,卷影复制服务 (VSS) 使用集中式 API 简化了 Microsoft 服务器解决方案的备份.Microsoft SharePoint Foundation 包括一个参考 VSS ...
- 如何排查sharepoint2010用户配置文件同步服务启动问题
用户配置文件同步服务与 Microsoft Forefront Identity Manager (FIM) 交互,以与外部系统(如目录服务和业务系统)同步配置文件信息.启用用户配置文件同步服务时,将 ...
- Source Insight基本使用和快捷键
Source Insight基本使用和快捷键 为什么要用Source Insight呢?貌似是因为比完整的IDE要更快一些,比较利于查看大量的代码. 软件的安装很简单,设置好安装目录. 配置好文档路径 ...
- Android 加载大图片到内存
本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/ap ...