/**
* Created by leyi on 2016/8/25 0025.
*/ /*********************package.json依赖模块************************/
/*
dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"postcss-value-parser": "*",
"normalize-range": "*",
"num2fraction": "*",
"browserslist": "*",
"caniuse-db": "*",
"postcss": "*",
"gulp-minify-css": "*",
"gulp-concat": "*",
"gulp-htmlmin": "*",
"gulp-imagemin": "*",
"imagemin-pngquant": "*",
"gulp-order":"*",
"gulp-rename": "*",
"gulp-sass": "*",
"gulp-uglify":"*",
"gulp-changed": "*"
}
*/
var gulp=require('gulp');//gulp模块
//css3前缀自动补全模块,依赖postcss-value-parser,normalize-range,num2fraction,browserslist,caniuse-db,postcss模块
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-minify-css');//css压缩模块
var concat = require('gulp-concat');//合并文件模块
var htmlmin = require('gulp-htmlmin');//html压缩模块
var imagemin = require('gulp-imagemin');//图片压缩模块
var pngquant = require('imagemin-pngquant');//图片深度压缩模块,是imagemin插件的一个扩展插件
var order = require('gulp-order');//先后排序
var rename = require('gulp-rename');//文件重命名模块
var sass = require('gulp-sass');//sass模块
var uglify = require('gulp-uglify');//js压缩模块
var changed=require('gulp-changed');//只操作有过修改的文件模块 /*********************设置各种输入输出文件夹的位置************************/ /*合并JS输入输出路径配置*/
var srcConcatjs = 'src/js/*.js';
var dstConcatjs = 'dist/js'; /*压缩JS输入输出路径配置*/
var srcJsmin = 'src/js/*.js';
var dstJsmin = 'dist/js'; /*压缩CSS输入输出路径配置*/
var srcCssmin = 'src/css/*.css';
var dstCssmin = 'dist/css'; /*css3前缀自动补全输出路径配置*/
var srcAutoprefix = 'src/css/*.css';
var dstAutoprefix = 'dist/css'; /*SASS编译输入输出路径配置*/
var srcSass = 'src/css/*.sass';
var dstSass = 'dist/css'; /*压缩图片输入输出路径配置*/
var srcImage = 'src/images/**/*.{png,jpg,gif,ico}';
var dstImage = 'dist/images'; /*压缩html输入输出路径配置*/
var srcHtml = 'src/*.html';
var dstHtml = 'dist'; /*********************具体任务************************/ //js合并任务
gulp.task('concatjs', function () {
gulp.src(srcConcatjs)
.pipe(order([]))//设置文件合并顺序
.pipe(concat('all.js'))//合并并重命名
.pipe(gulp.dest(dstConcatjs));
}); //js压缩任务
gulp.task('jsmin', function () {
gulp.src([srcJsmin])// 指明源文件路径、并进行文件匹配
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(uglify({
mangle: false,//类型:Boolean 默认:true 是否修改变量名
compress: true,//类型:Boolean 默认:true 是否完全压缩
preserveComments: 'all' //保留所有注释
}))
.pipe(gulp.dest(dstJsmin));
}); //css压缩任务
gulp.task('cssmin', function () {
gulp.src(srcCssmin)
.pipe(cssmin({
advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
compatibility: '!',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
keepBreaks: false//类型:Boolean 默认:false [是否保留换行]
}))
.pipe(gulp.dest(dstCssmin));
}); //css3前缀自动补全任务
gulp.task('autoprefix', function () {
gulp.src(srcAutoprefix)
.pipe(autoprefixer({
browsers: [ "chrome 30",'ie >=8', "Firefox < 20","ios_saf 8", "safari 8",'Android >= 2.3'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
.pipe(gulp.dest(dstAutoprefix));
});
// [ "chrome 30", "Firefox < 20","ios_saf 8", "safari 8",'Android >= 2.3','ie 6-8','Opera <= 20']
// [ "chrome 30", "Firefox < 20","ios_saf 8", "safari 8",'Android >= 2.3'] //sass任务
gulp.task('sass', function() {
gulp.src(srcSass)
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(gulp.dest(dstSass));
}); //图片压缩任务
gulp.task('imagemin', function () {
return gulp.src(srcImage)
.pipe(changed(dstImage)) // 对比文件是否有过改动(此处填写的路径和输出路径保持一致)
.pipe(imagemin({
optimizationLevel: 3, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true, //类型:Boolean 默认:false 多次优化svg直到完全优化
use: [pngquant()] //使用pngquant插件进行深度压缩
}))
.pipe(gulp.dest(dstImage));
}); //html压缩任务
gulp.task('htmlmin', function () {
var options = {
removeComments: false,//清除HTML注释
collapseWhitespace: false,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src(srcHtml)
.pipe(htmlmin(options))
.pipe(gulp.dest(dstHtml));
}); /*
//gulp默认任务模板
gulp.task('default',['']); //watch任务模板
gulp.task('watch',function(){
gulp.watch('', ['']);
gulp.watch('',function(event){
//变化类型 added为新增,deleted为删除,changed为改变
console.log(event.type);
//变化的文件的路径
console.log(event.path);
})
})
*/

详细使用说明-http://www.cnblogs.com/2050/p/4198792.html  

gulp配置文件备份的更多相关文章

  1. javaweb常用工具类及配置文件备份

    Javaweb常用工具类及配置文件备份   做一个代码备份,以后常用到的. hibernate工具类备份 package com.dly.service; /*  * hibernate获取sessi ...

  2. gulp配置

    /* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = requ ...

  3. Scss开发临时学习过程||webpack、npm、gulp配置

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

  4. gulp 配置前端项目打包

    项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin  压缩j ...

  5. gulp 配置自动化前端开发

    有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...

  6. gulp配置版本号 教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  7. Express+Less+Gulp配置高效率开发环境

    版权声明:本文由金朝麟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/627049001486519548 来源:腾云阁 h ...

  8. 流行得前端构建工具比较,以及gulp配置

    前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis用起来最简单,我打算自己得项目中使用一下fis. 先说一下gulp安装吧. 第一步:安装n ...

  9. win上gulp配置

    主线: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1,安装node.js 1.1.说明 ...

随机推荐

  1. mybatis实战教程(mybatis in action)之三:实现数据的增删改查

    前面已经讲到用接口的方式编程.这种方式,要注意的一个地方就是.在User.xml  的配置文件中,mapper namespace="com.yihaomen.mybatis.inter.I ...

  2. MySQL服务 - MySQL列类型、SQL模式、数据字典

    MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...

  3. localStorage、sessionStorage在无痕模式下被禁用

    在移动web开发中,经常会使用到localStorage去缓存一些数据,一般情况下,我们只需要按照下面的代码去使用就不会有 问题. if(window.localStorage){ localStor ...

  4. 检测文件是否有BOM 头,并删除BOM头(php)

    将下面文件放在网站根目录访问即可,它会遍历当前目录下所有子目录,检测文件是否含有BOM头,并删除BOM头 <?php //remove the utf-8 boms //by magicbug ...

  5. yum:在Red Hat和Fedora中使用

    1.列出已安装包: yum list installed--------->输出的结果可能在屏幕上一闪而过.所以最好把已安装包的列表重定义到一个文件中.然后是使用more/less查看 yum ...

  6. 从零开始系列--R语言基础学习笔记之一 环境搭建

    R是免费开源的软件,具有强大的数据处理和绘图等功能.下面是R开发环境的搭建过程. 一.点击网址 https://www.r-project.org/ ,进入"The R Project fo ...

  7. windows下CMake使用图文手册 Part 4

    例子4:链接静态库(.lib) 例子3里面我们构建了date.lib, 这个例子里我们调用这个库. 前提: date.h的头文件在 E:\Playground\CMakeExamples\DateLi ...

  8. 对"QQGame-大家来找茬"的辅助工具的改进

    [前言]最近在博客园首页上看到有“大家来找茬”这个游戏(此游戏为找出两个相近图片的不同点)外挂的相关帖子,所以这里我也翻看了我之前(2009年5月)的写的一个简单的辅助程序(采用 VC6 开发的).我 ...

  9. AE开发示例之GPBufferLayer

    using System; using System.Drawing;using System.Text;using System.Windows.Forms;using System.Runtime ...

  10. 慕课网-Java入门第一季-6-8 使用 foreach 操作数组

    来源:http://www.imooc.com/code/1864 foreach 并不是 Java 中的关键字,是 for 语句的特殊简化版本,在遍历数组.集合时, foreach 更简单便捷.从英 ...