/** * 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); }) }) */