/**
* 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自动化打包工具的更多相关文章

  1. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  2. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  3. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  4. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

  5. gulp自动化打包及静态文件自动添加版本号

    前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...

  6. gulp自动化构建工具安装使用(1)

    我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...

  7. gulp自动化构建工具使用总结

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  8. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

  9. gulp自动化构建工具使用

    gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...

随机推荐

  1. VMware环境安装MacOS

    环境: win10专业版 VMware 14 Pro 开始吧 1. 停止服务 2. 解压并管理员权限运行unlocker,目的是使得 win10 环境下的 VMWare14Pro 支持 mac 系统的 ...

  2. 使用maven profile实现多环境配置相关打包

    项目开发需要有多个环境,一般为开发,测试,预发,正式4个环境,通过maven可以实现按不同环境进行打包部署,命令为: mvn package -P dev 在eclipse中可以右击选项run con ...

  3. Linux 命令梳理

    Linux 命令梳理 待梳理命令 nohup 用户管理 useradd 新建用户 sudo useradd {user name} -s /bin/bash -d /data/{user name} ...

  4. curl 用法总结

    curl -g -k --noproxy '*' -s -o /dev/null -w '%{http_code}' http://172.25.112.34/identity/v3 KSURL=ht ...

  5. nvgre

    GRE RFC2784 工作原理 Structure of a GRE Encapsulated Packet A GRE encapsulated packet has the form: ---- ...

  6. 前端 --- 3 css 属性

    一. 标签嵌套规则 块级标签能够嵌套某些块级标签和内敛标签(行内标签) 内敛标签不能嵌套块级标签,只能嵌套内敛标签 二.   属性 1.宽和高 (块级标签能够设置高度和宽度 内敛标签不能设置,设置了没 ...

  7. maven项目出现红色感叹号报错

    背景 在eclipse部署maven项目的时候,项目出现红色的感叹号导致项目无法启动. 解决步骤 1.右键项目——>Maven——>Update Project ,弹出下框: 点击OK. ...

  8. Vim 学习

    主要分为三种模式: 一般模式 编辑模式 命令行模式 光标的移动 单词级 比单纯的逐个字符的移动,效率要高 w or W 向移动到下一单词开头 ★★ b or B 向左移动到单词开头 ★★ 块级 gg文 ...

  9. excel2010的使用笔记

    新增的 "工具" 主选项卡 不管是word还是excel 的2010 , 在进行编辑一些图片, 图表, 表格等工具的时候, 都会 "动态"的生成相应的 &quo ...

  10. c# 之系统环境安装

    在重装系统后,对一些原有软件进行了卸载,不知道是什么原因总是提示vs2015 需安装IE10,但是又碰到ie10的一些插件不适合此系统.网上介绍的vs修复没有任何作用 最后找到方法是:重装系统,然后不 ...