1.压缩tinypng图片 gulp-tinypng-nokey，但不压缩gif格式（另外一个gulp-imagemin压缩率不高，可以压缩gif格式）
// 获取 gulp
var gulp = require('gulp'); // 获取 gulp-imagemin 模块
var imagemin = require('gulp-tinypng-nokey') // 压缩图片任务
// 在命令行输入 gulp-tinypng-nokey 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('E:/work/d1xz/www/statics/ffsm/aiqingtl/1/images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
}); // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('images/*.*', ['images'])
}); // 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])
2.压缩css gulp-minify-css
// 获取 gulp
var gulp = require('gulp') // 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css') // 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('E:/work/d1xz/www/statics/xingzuo360/pc/css/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
}) // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
}); // 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])
3.压缩js gulp-uglify
// 获取 gulp
var gulp = require('gulp') // 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify') // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('js', function() {
// 1. 找到文件
gulp.src('E:/work/d1xz/www/statics/xingzuo360/pc/js/1/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
}) // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
}) // 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['js', 'auto'])
4.实时刷新 browser-sync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();// 静态服务器
gulp.task('server', function() {
var files = [
'pages/*.html',
'css/*.css',
'js/*.js'
];
browserSync.init({
server: { baseDir: "./" }
});
});// 代理
gulp.task('server', function() {
browserSync.init({ proxy: "dev.ffsm.d1xz.net" });//proxy: "你的域名或IP"
});//这个可以注释掉，不写也行。目前我还没有发现这个的用法
gulp.task('watch', function () {
gulp.watch([
'css/*.css',
'pages/*.html',
'js/*.js'
], ['browser-sync']);
});
gulp.task('default', ['server','watch']);
5.合并在一起gulpfile.js
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),// 实时刷新
imagemin = require('gulp-tinypng-nokey'),//压缩图片
uglify = require('gulp-uglify'),//压缩js
minifyCSS = require('gulp-minify-css');//压缩css
//一、 实时刷新
gulp.task('server', function() {
var files = [
'pages/*.html',
'css/*.css',
'js/*.js'
];
browserSync.init({
server: { baseDir: "./" }
});
});// 代理
gulp.task('server', function() {
browserSync.init({ proxy: "dev.ffsm.d1xz.net" });
});
//二、 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('E:/work/d1xz/www/statics/ffsm/danshengz/1/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('autocss', function () {
// 监听文件修改，当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
});
//三、 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('js', function() {
// 1. 找到文件
gulp.src('E:/work/d1xz/www/statics/ffsm/danshengz/1/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('autojs', function () {
// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
});
//四、 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('E:/work/d1xz/www/statics/ffsm/danshengz/1/images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('autoimg', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('images/*.*', ['images'])
});
6.package.json
{
"devDependencies": {
"browser-sync": "^2.18.6",
"gulp": "^3.9.1",
"gulp-cache": "^1.0.1",
"gulp-clean": "^0.3.2",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-tinypng-nokey": "^1.1.0",
"gulp-uglify": "^2.0.0",
"has-gulplog": "^0.1.0",
"jshint": "^2.9.4",
"minimist": "^1.2.0",
"stream-consume": "^0.1.0"
}
}