Gulp打包构建项目

转载自：https://blog.youkuaiyun.com/sennyla/article/details/82148025

打包压缩js,css,支持sass编译成css,图片压缩，图片组建成精灵图，静态文件拷贝，实时监听变化自动刷新浏览器
//引入相关插件
var gulp = require('gulp');
var rename = require('gulp-rename');   //文件重命名
var uglify = require('gulp-uglify');   //JS代码压缩
var minCSS = require('gulp-clean-css'); //CSS代码压缩
var autoprefixer = require('gulp-autoprefixer');  //添加浏览器前缀
var clean   = require('gulp-clean');     //清空文件
var cleanDest = require('gulp-clean-dest'); //清空dist目录指定文件
var changed = require('gulp-changed');  //仅仅传递更改过的文件
var imagemin = require('gulp-imagemin');  //图片压缩
var spritesmith = require('gulp.spritesmith');  //PNG图片合并成精灵图
const filter = require('gulp-filter');   //js压缩过滤器，排除已压缩过的
var sass = require('gulp-sass');  //处理sass文件
var browserSync = require('browser-sync'); //拥有实时重载服务器
var reload = browserSync.reload;  //编译后重新刷新浏览器
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');

var pageSrc = 'src/pages/**/*.html';
var pageDist = 'dist/pages/';
var jsSrc = 'src/js/**/*.js';
var jsDist = 'dist/js/';
var cssSrc = 'src/css/**/*.css';
var cssDist = 'dist/css/';
var sassSrc = 'src/sass/**/*.scss';
var sassDist = 'src/css/';
var imgSrc = 'src/images/*';
var imgDist = 'dist/images/';
var iconfontSrc = 'src/iconfont/*';
var iconfontDist = 'dist/iconfont/';
var staticSrc = 'src/static/*';
var staticDist = 'dist/static/';
var spriteSrc = 'src/images/*.png';
var spriteDist = 'src/images/sprite';

gulp.task('html', function() {  //拷贝html
    return gulp.src(pageSrc)
        .pipe(changed(pageDist))
        .pipe(cleanDest(pageDist))//先清空后生成
        .pipe(gulp.dest(pageDist))
        .pipe(reload({ stream:true }));
});

//对已经压缩过的文件进行过滤，不再压缩
var  jsFilter = filter([jsSrc, '!src/js/**/*.min.js'], {restore: true});
gulp.task('js', function() {  //拷贝压缩js
    return gulp.src(jsSrc)
        .pipe(changed(jsDist))
        .pipe(cleanDest(jsDist))//先清空后生成
        .pipe(jsFilter)
        // 这会输出一个未压缩过的版本
        .pipe(gulp.dest(jsDist))
        // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest(jsDist))
        .pipe(reload({ stream:true }));
});
gulp.task('css', function() {  //拷贝压缩css
    return gulp.src(cssSrc)
        .pipe(changed(cssDist))
        .pipe(cleanDest(cssDist))//先清空后生成
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        // 这会输出一个未压缩过的版本
        .pipe(gulp.dest(cssDist))
        .pipe(minCSS())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(cssDist))
        .pipe(reload({ stream:true }));
});
gulp.task('sass', function () {  //将sass文件编译成css
    return gulp.src(sassSrc)
        .pipe(changed(sassSrc))
        .pipe(cleanDest(sassDist))//先清空后生成
        .pipe(sass())
        .pipe(gulp.dest(sassDist))
        .pipe(reload({ stream:true }));
});

gulp.task('img', function() {  //拷贝压缩图片
    return gulp.src([imgSrc,'src/images/**/*'])
        .pipe(changed(imgSrc))
        .pipe(cleanDest(imgDist))//先清空后生成
        // 这会输出一个未压缩过的版本
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest(imgDist))
        .pipe(reload({ stream:true }));
});
gulp.task('sprite', function () {  //产出精灵图

   /*  //img,css产出的路径相同时
   var spriteData = gulp.src(spriteSrc).pipe(cleanDest(spriteDist)).pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));
    return spriteData.pipe(gulp.dest(spriteDist));*/
    var spriteData = gulp.src(spriteSrc)
        .pipe(cleanDest(spriteDist))
        .pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));

    //设置打包的图片路径
    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(gulp.dest(spriteDist));
    //设置打包的css路径
    var cssStream = spriteData.css
        .pipe(gulp.dest('src/css/sprite'));

    return merge(imgStream, cssStream);
});

gulp.task('ifont', function () {  //拷贝图标字体
    return gulp.src(iconfontSrc)
        .pipe(changed(iconfontDist))
        .pipe(cleanDest(iconfontDist))//先清空后生成
        .pipe(gulp.dest(iconfontDist))
        .pipe(reload({ stream:true }));
});
gulp.task('static', function () {  //拷贝静态资源，如json数据
    return gulp.src(staticSrc)
        .pipe(changed(staticDist))
        .pipe(cleanDest(staticDist))//先清空后生成
        .pipe(gulp.dest(staticDist))
        .pipe(reload({ stream:true }));
});

//清除dist目录
gulp.task('clean', function () {
    return gulp.src('dist', {read: false})
        .pipe(clean());
});

//初始化时，批量执行多个操作
gulp.task('build', ['html','sass', 'css','js','sprite','img','ifont','static']);

//开启本地服务器监视文件改动
gulp.task('serve', function() {
    browserSync({
        open:false,
        server: {
            baseDir: 'dist',
            index : "/pages/index.html"  //将dist目录下的index.html作为入口页面访问
        }
    });
});

//启动项目，命令:gulp start ,
// 浏览器访问地址:http://localhost:3000/pages/index.html
gulp.task('start',['clean'], function() {
    gulp.start(['build','serve']);
    gulp.watch(pageSrc, ['html']);
    gulp.watch(sassSrc, ['sass']);
    gulp.watch(cssSrc, ['css']);
    gulp.watch(jsSrc, ['js']);
    gulp.watch('src/images/*.png', ['sprite']);
    gulp.watch(imgSrc, ['img']);
    gulp.watch(iconfontSrc, ['ifont']);
    gulp.watch(staticSrc, ['static']);
});

gulp.task('tojsp', function() {  //新增jsp文件
    return gulp.src('dist/pages/**/*.html')
           .pipe(rename({ extname: '.jsp' }))
           .pipe(gulp.dest('dist/views/'))
});

说明：使用 BrowserSync 和 gulp，你可以轻松地创建一个开发服务器，然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。打开一个浏览器，访问默认的 URL (http://localhost:3000)
当前案例的目录结构为：（目录粗略图，详细图）
 

注：当你启动项目后直接浏览器输入http://localhost:3000时可能返回的页面信息是:Get Error，排除了项目配置错误及代码书写错误后，该错误可能是你的访问地址没有进入到指定页面，倘若你的项目目录结构比较复杂，主页面不是直接暴露在外面，此时你需要在地址后面补充访问的页面路径，例如我这边的访问时:http://localhost:3000/pages/home/home.html