gulp实例
前端生产环境的简单部署
http://ionichina.com/topic/558a1c1346cb5ff7268cee9d
var gulp = require('gulp');
// 引入gulp组件(插件)
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var minifyCss = require('gulp-minify-css');
var notify = require('gulp-notify');
var concat = require('gulp-concat');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var gulpif = require('gulp-if');
var clean = require('gulp-clean');
//index.html css、js合并压缩
gulp.task('index', function () {
var assets = useref.assets();
return gulp.src('app/index.html')
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('www'));
});
// 语法检查
gulp.task('jshint', function () {
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 复制文件
gulp.task('copy', function () {
gulp.src('app/fonts/*')
// 目标地址
.pipe(gulp.dest('www/fonts/'))
gulp.src('app/templates/**')
// 目标地址
.pipe(gulp.dest('www/templates/'))
gulp.src('app/img/*')
// 目标地址
.pipe(gulp.dest('www/img/'))
});
// 清空图片、样式、js
gulp.task('clean', function () {
return gulp.src(['www/css/*', 'www/js/*', 'www/img/*', 'www/lib/*', 'www/templates/*'], {read: false})
.pipe(clean({force: true}));
});
// 注册缺省任务
gulp.task('default', ['jshint', 'clean', 'index', 'copy']);
gulp实例的更多相关文章
- Gulp实例(包括环境搭建的自动检测)
# Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 s ...
- gulp 使用介绍
gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要 ...
- gulp 相关文章
1.https://www.cnblogs.com/sxz2008/p/6370221.html 2.https://www.cnblogs.com/wujie520303/p/4964931.htm ...
- gulp源码分析
一.整体结构分析 整体结构 通过在nodejs环境对源码的打印,我们最终得到的gulp实例行如下图.那么我们gulp实例上的属性和方法是如何生成的呢? Gulp { domain: null, _ev ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- react-router+webpack+gulp路由实例
背景:新项目要开始了,有一种想要在新项目中使用react的冲动,应该也是一个单页面的应用,单页应用就涉及到一个路由的问题.于是最近在网上找了蛮多关于react-router的文章,也遇到了许多的坑,经 ...
- webpack与gulp的区别及实例搭建
webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有 ...
- React gulp、Browserify、Webpack实例
一.gulp var gulp = require('gulp'); var react = require('gulp-react'); gulp.task('jsx', function() { ...
- gulp入门学习实例
好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gul ...
随机推荐
- python groupby 函数 as_index
在官方网站中对as_index有以下介绍: as_index : boolean, default True For aggregated output, return object with gro ...
- [转]Spring注解-@Configuration注解、@Bean注解以及配置自动扫描、bean作用域
1.@Configuration标注在类上,相当于把该类作为spring的xml配置文件中的<beans>,作用为:配置spring容器(应用上下文) package com.test.s ...
- 在springboot 和 mybatis 项目中想要显示sql 语句进行调试
在springBoot+Mybatis日志显示SQL的执行情况的最简单方法就是在properties新增: logging.level.com.dy.springboot.server.mapper= ...
- Flume 相关
在CentOS 7上安装配置Flume https://mos.meituan.com/library/41/how-to-install-flume-on-centos7/ Flume NG 学习笔 ...
- AliSQL 5.6.32 vs MySQL 5.7.15抢鲜测试
摘要: 今天我们有幸抢鲜测试AliSQL,直接拿来和MySQL 5.7.15对比看看. AliSQL刚宣布开源,我就提交申请内测名额,节前收到开放内测邀请,于是第一时间进行了测试了解,希望能给大 ...
- 使用curator 来管理elasticsearch的index
这里我们参考官网安装curator https://www.cookiesinn.org/elasticsearch_curator_delete_indices/ https://www.elast ...
- vuex入门教程和思考
Vuex是什么 首先对于vuex是什么,我先引用下官方的解释. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可 ...
- Spring Cloud Consul
1.2.0.RELEASE 该项目通过自动配置并绑定到Spring环境和其他Spring编程模型成语,为Spring Boot应用程序提供Consul集成.通过几个简单的注释,您可以快速启用和配置应用 ...
- bulk insert 在mssql中使用
从远程数据文件中批量导入 若要使用 BULK INSERT 从其他计算机中大容量导入数据,必须在两台计算机之间共享数据文件. 指定共享数据文件时,请使用它的通用命名约定 (UNC) 名称,其一般形式为 ...
- CR, LF, CR/LF 回车 换行
[时间:2016-07] [状态:Open] 本文主要介绍"回车"(Carriage Return)和"换行"(Line Feed)这两个概念的来历和区别. C ...