gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

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"
  }
}