gulp自动化打包工具
/**
* Created by hasee on 2016/7/5.
*/
var gulp = require('gulp');
var sass = require('gulp-sass');//容易出错 plus
var webserver = require("gulp-webserver"); /*js*/
/*var uglify = require("gulp-uglify");*/
var rename = require("gulp-rename"); /*css*/
var concat = require("gulp-concat");
var autoprefixer = require("gulp-autoprefixer");
var minifyCSS = require("gulp-minify-css"); var imagemin = require('gulp-imagemin');//容易出错 /*开启有一个服务器*/
gulp.task("webserver",function(){
gulp.src("./")
.pipe(webserver({
livereload: true, /*修改文件自动刷新*/
directoryListing: { /*要不要显示目录,开发环境下可以显示*/
enable:true,
path: './' /*有哪个目录下开始访问*/
},
port: 81, /*端口号*/
host: '172.18.99.189'
}))
}); gulp.task("styles",function(){
gulp.src("src/sass/*.scss")
.pipe(sass().on('error', sass.logError))
/* .pipe(minifyCSS())
.pipe(concat("index.min.css"))*/
.pipe(gulp.dest("app/css/"))
}); gulp.task("copyHtml",function(){
gulp.src("src/*.html")
.pipe(gulp.dest("app/"))
}); gulp.task("copyJs",function(){
gulp.src("src/js/libs/*.js") .pipe(gulp.dest("app/js/libs/"))
}); gulp.task("script",function(){
gulp.src("src/js/*.js")
/* .pipe(jshint())*/
.pipe(gulp.dest("app/js/"))
}); /*创建一个图片压缩的任务*/
gulp.task("images",function(){
return gulp.src("src/images/*")
.pipe(imagemin())
.pipe(gulp.dest("app/images/"))
}); gulp.task("watch",function(){
gulp.watch("src/sass/*.scss",["styles"]);
gulp.watch("src/*.html",["copyHtml"]);
gulp.watch("src/js/*.js",["script"])
}); gulp.task("default",["styles","watch","copyHtml","images","copyJs","script",
"webserver"]);
gulp自动化打包工具的更多相关文章
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- gulp自动化构建工具使用总结
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp自动化构建工具的简单使用
相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...
- gulp自动化构建工具使用
gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...
随机推荐
- Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例
Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例 一.快速上手 1,配置文件 (1)pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 ...
- Spring-Data-Redis 下实现jedis连接断开后自动重连
原先使用jedis的时候,处理手段是在从连接池获取连接时捕获JedisConnectionException异常,在异常处理部分重新获取连接,但是spring data redis似乎不会,如下所示: ...
- 【题解】Luogu P2257 YY的GCD
原题传送门 这题需要运用莫比乌斯反演(懵逼钨丝繁衍) 显然题目的答案就是\[ Ans=\sum_{i=1}^N\sum_{j=1}^M[gcd(i,j)=prime]\] 我们先设设F(n)表示满足\ ...
- ldap集成rabbitmq
rabbitmq版本: 3.7.4 rabbitmq支持ldap需要开启插件: rabbitmq-plugins enable rabbitmq_auth_backend_ldap rab ...
- 头像上传uploadPreview插件
原文链接:https://blog.csdn.net/Alisa_L/article/details/52923953 uploadPreview 今天写头像上传,使用到uploadPreview插件 ...
- webpack对于引入的模块无法智能代码提示
前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...
- NOI 2007 货币兑换Cash (bzoj 1492) - 斜率优化 - 动态规划 - CDQ分治
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...
- 使用SSH框架遇到的错误总结
1.org.hibernate.exception.ConstraintViolationException: could not insert: 如果是主键是自增序列,映射文件 指定主键生成器< ...
- Python3基础 list + *运算 扩充列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- codevs1017乘积最大
codevs1017 乘积最大 题目描述 Description 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场 ...