标签：使用 res pack 设置 min lap spl ash webp
前段时间刚好在开发公司的首页，使用的是gulp工作流，gulp相对于webpack而言，配置简单，也更加直观（很符合直觉），日常开发一些静态页面、html5专题也足够，这里把遇到的坑与实践经验记录一下。
gulp api 非常简单，由5个方法组成：task run watch src dest，复杂的功能由插件的形式来实现。
整体的工作流程就是 取出文件 => 各种处理一番 => 输出 task 创建任务，在命令行下可以输入 gulp test 来执行test的任务。 run 运行任务 watch 监听任务 src 设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式 /*/ .scss。 dest 设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。
1、全局安装gulp
$ npm install -g gulp
2、项目中安装gulp，新建gulpfile.js 配置文件
$ npm install --save-dev gulp
3、使用的gulp插件
"gulp-autoprefixer": "^5.0.0", -- 自动补全浏览器前缀 "gulp-file-include": "^2.0.1", -- 提供如后端模板功能 "gulp-imagemin": "^4.1.0", -- 处理图片 "gulp-minify-css": "^1.2.4", -- 压缩CSS "gulp-uglify": "^3.0.0", -- 压缩JS "imagemin-jpeg-recompress": "^5.1.0" -- 处理图片 "browser-sync": "^2.24.5", --浏览器热刷新
gulp 配合以上插件基本能够满足日常开发的需要，提供模板、文件刷新、图片压缩、热刷新等功能，唯一不爽的是静态资源更新以后不能自动复制到dist目录，要重启整个进程，勉强能够接受吧。
const gulp = require(‘gulp‘); const uglify = require(‘gulp-uglify‘); const minifyCSS = require(‘gulp-minify-css‘); const imagemin = require(‘gulp-imagemin‘); const imageminJpegRecompress = require(‘imagemin-jpeg-recompress‘); const imageminOptipng = require(‘imagemin-optipng‘); const fileinclude = require(‘gulp-file-include‘); const autoprefixer = require(‘gulp-autoprefixer‘); const browerSync = require(‘browser-sync‘).create(); const srcScript = ‘./src/js/*.js‘; const dstScript = ‘./dist/js‘; const srcCSS = ‘./src/css/*.css‘; const dstCSS = ‘./dist/css‘; const srcImage = ‘./src/img/*.*‘; const dstImage = ‘./dist/img‘; const srcHtml = ‘./src/*.html‘; const dstHtml = ‘./dist‘; //处理JS文件:压缩,然后换个名输出; //命令行使用gulp script启用此任务; gulp.task(‘script‘, function() { gulp.src(srcScript) .pipe(uglify()) .pipe(gulp.dest(dstScript)); }); //处理CSS文件:压缩,然后换个名输出; //命令行使用gulp css启用此任务; gulp.task(‘css‘, function() { gulp.src(srcCSS) .pipe(autoprefixer({ browsers: [‘last 2 versions‘], cascade: false })) .pipe(minifyCSS()) .pipe(gulp.dest(dstCSS)); }); //图片压缩任务,支持JPEG、PNG及GIF文件; //命令行使用gulp jpgmin启用此任务; gulp.task(‘imgmin‘, function() { var jpgmin = imageminJpegRecompress({ accurate: true,//高精度模式 quality: "high",//图像质量:low, medium, high and veryhigh; method: "smallfry",//网格优化:mpe, ssim, ms-ssim and smallfry; min: 70,//最低质量 loops: 0,//循环尝试次数, 默认为6; progressive: false,//基线优化 subsample: "default"//子采样:default, disable; }), pngmin = imageminOptipng({ optimizationLevel: 4 }); gulp.src(srcImage) .pipe(imagemin({ use: [jpgmin, pngmin] })) .pipe(gulp.dest(dstImage)); }); //使用gulp file-include 处理公用页面（头部、底部） //命令行使用gulp html启用此任务; gulp.task(‘html‘, function() { gulp.src(srcHtml) .pipe(fileinclude({ prefix: ‘@@‘, basepath: ‘./src/tpl‘, indent: true })) .pipe(gulp.dest(dstHtml)); }); //服务器任务:以dist文件夹为基础,启动服务器; //命令行使用gulp server启用此任务; gulp.task(‘server‘, function() { browerSync.init({ server: "./dist" }); }); //监控改动并自动刷新任务; //命令行使用gulp auto启动; gulp.task(‘auto‘, function() { gulp.watch(srcScript, [‘script‘]); gulp.watch(srcCSS, [‘css‘]); gulp.watch(srcImage, [‘imgmin‘]); gulp.watch(srcHtml, [‘html‘]); gulp.watch(‘./dist/**/*.*‘).on(‘change‘, browerSync.reload); }); //gulp默认任务(集体走一遍,然后开监控); gulp.task(‘default‘, [‘script‘, ‘css‘, ‘imgmin‘, ‘html‘, ‘server‘, ‘auto‘]);
标签：使用 res pack 设置 min lap spl ash webp
原文地址：https://www.cnblogs.com/jydeng/p/9282269.html
