gulp配置文件备份
/**
* 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配置文件备份的更多相关文章
- javaweb常用工具类及配置文件备份
Javaweb常用工具类及配置文件备份 做一个代码备份,以后常用到的. hibernate工具类备份 package com.dly.service; /* * hibernate获取sessi ...
- gulp配置
/* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = requ ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- gulp 配置前端项目打包
项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问. gulpjs.com中有很多插件可以用来配置打包部署. 需要用的常用插件有: gulp-jsmin 压缩j ...
- gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...
- gulp配置版本号 教程之gulp-rev-append
简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...
- Express+Less+Gulp配置高效率开发环境
版权声明:本文由金朝麟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/627049001486519548 来源:腾云阁 h ...
- 流行得前端构建工具比较,以及gulp配置
前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis用起来最简单,我打算自己得项目中使用一下fis. 先说一下gulp安装吧. 第一步:安装n ...
- win上gulp配置
主线: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1,安装node.js 1.1.说明 ...
随机推荐
- mybatis实战教程(mybatis in action)之三:实现数据的增删改查
前面已经讲到用接口的方式编程.这种方式,要注意的一个地方就是.在User.xml 的配置文件中,mapper namespace="com.yihaomen.mybatis.inter.I ...
- MySQL服务 - MySQL列类型、SQL模式、数据字典
MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...
- localStorage、sessionStorage在无痕模式下被禁用
在移动web开发中,经常会使用到localStorage去缓存一些数据,一般情况下,我们只需要按照下面的代码去使用就不会有 问题. if(window.localStorage){ localStor ...
- 检测文件是否有BOM 头,并删除BOM头(php)
将下面文件放在网站根目录访问即可,它会遍历当前目录下所有子目录,检测文件是否含有BOM头,并删除BOM头 <?php //remove the utf-8 boms //by magicbug ...
- yum:在Red Hat和Fedora中使用
1.列出已安装包: yum list installed--------->输出的结果可能在屏幕上一闪而过.所以最好把已安装包的列表重定义到一个文件中.然后是使用more/less查看 yum ...
- 从零开始系列--R语言基础学习笔记之一 环境搭建
R是免费开源的软件,具有强大的数据处理和绘图等功能.下面是R开发环境的搭建过程. 一.点击网址 https://www.r-project.org/ ,进入"The R Project fo ...
- windows下CMake使用图文手册 Part 4
例子4:链接静态库(.lib) 例子3里面我们构建了date.lib, 这个例子里我们调用这个库. 前提: date.h的头文件在 E:\Playground\CMakeExamples\DateLi ...
- 对"QQGame-大家来找茬"的辅助工具的改进
[前言]最近在博客园首页上看到有“大家来找茬”这个游戏(此游戏为找出两个相近图片的不同点)外挂的相关帖子,所以这里我也翻看了我之前(2009年5月)的写的一个简单的辅助程序(采用 VC6 开发的).我 ...
- AE开发示例之GPBufferLayer
using System; using System.Drawing;using System.Text;using System.Windows.Forms;using System.Runtime ...
- 慕课网-Java入门第一季-6-8 使用 foreach 操作数组
来源:http://www.imooc.com/code/1864 foreach 并不是 Java 中的关键字,是 for 语句的特殊简化版本,在遍历数组.集合时, foreach 更简单便捷.从英 ...