gulp打包普通项目

第一步：npm init 生成一个page.json
第二步建立一个gulpfile.js文件
主要是写这个文件

var gulp = require('gulp'),
    rev = require('gulp-rev-append'),
    fs = require('fs'),
    fse = require('fs-extra'),
    path = require('path'),
    util = require('util');
var htmlmin = require('gulp-htmlmin'); //压缩html

var uglify = require('gulp-uglify');  //获取uglify(用于压缩)
var filter = require('gulp-filter');  
var minifycss = require('gulp-minify-css'); //压缩css


var webpack = require("webpack");


gulp.task('revHtml',function(){
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        //babel:true,
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('./web/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist'))
});
gulp.task('static', function() {
    
    fse.emptydirSync('./dist');

    // gulp.src('./web/*.html')
    //     .pipe(rev())
    //     .pipe(gulp.dest('./dist'));

    var map = {
        js: function(pipe) {
            pipe = pipe.pipe(filter("**/*.js"));
            pipe = pipe.pipe(uglify());
            return pipe;
        },
        css: function(pipe) {
            pipe = pipe.pipe(filter("**/*.css"));
            pipe = pipe.pipe(minifycss())
            return pipe;
        },
        png: function(pipe) {
            pipe = pipe.pipe(filter("**/*.png"));
            return pipe;
        },
        gif: function(pipe) {
            pipe = pipe.pipe(filter("**/*.gif"));
            return pipe;
        },
        jpg: function(pipe) {
            pipe = pipe.pipe(filter("**/*.jpg"));
            return pipe;
        },
        svg: function(pipe) {
            pipe = pipe.pipe(filter("**/*.svg"));
            return pipe;
        },
        ttf: function(pipe) {
            pipe = pipe.pipe(filter("**/*.ttf"));
            return pipe;
        },
        woff: function(pipe) {
            pipe = pipe.pipe(filter("**/*.woff"));
            return pipe;
        }
    }
    
    for(var item in map) {
        var pipe = gulp.src('./web/**');     //压缩的文件
       
        map[item](pipe).pipe(gulp.dest('./dist'));     //输出的文件夹
    }
});


gulp.task('staticwatch', function () {
    gulp.watch(['./web/**/*'],['static']);      //监听文件
})

gulp.task('default', function() {

    fse.emptydirSync('dist');
    gulp.start('revHtml');
    gulp.start('static');

    gulp.start('staticwatch');
});

这里面用到第三方的插件度要安装

这就是目录结构

运行gulp指令就可以了

这个还不是最优的，我在整理下

 

var gulp = require('gulp');
var concat = require('gulp-concat');//合并
var uglify = require('gulp-uglify');//压缩js
var rev = require('gulp-rev');//为静态文件随机添加一串hash值, 解决cdn缓存问题
var revCollector = require('gulp-rev-collector');//替换路径
var htmlmin = require('gulp-htmlmin'); ////使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。
var del = require('del');//删除文件

//压缩js
//gulp.src('./js/*.js')               // * 匹配js文件夹下所有.js格式的文件
gulp.task('js',function(){
    return gulp.src('./js/*.js')
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('./build/js'))
    .pipe(rev.manifest('rev-js-manifest.json'))
    .pipe(gulp.dest('./build/js'));
});

//压缩css
var autoprefix = require('gulp-autoprefixer');//兼容处理
var minifyCss = require('gulp-minify-css');//压缩
gulp.task('style',function(){
    return gulp.src('./css/*.css')
        .pipe(autoprefix({
                browsers: ['last 2 versions'],
                cascade: false
            }))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./build/css'))
        .pipe(rev.manifest('rev-css-manifest.json'))
        .pipe(gulp.dest('./build/css'));
});

//img
gulp.task('images', function (){
    return gulp.src(['./images/*.jpg','./images/*.png','./images/*.gif'])  
        .pipe(rev())//文件名加MD5后缀
        .pipe(gulp.dest('./build/images')) 
        .pipe(rev.manifest('rev-images-manifest.json'))//生成一个rev-manifest.json
        .pipe(gulp.dest('./build/images'));//将 rev-manifest.json 保存到 rev 目录内
});
//html
gulp.task('revHtml',function(){
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        //babel:true,
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('./html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./build/html'))
});

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
//gulp.src('./js/**/*.js')            // ** 匹配js文件夹的0个或多个子文件夹

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function() {
    //html，针对js,css,img
    return gulp.src(['./build/**/*.json', './build/html/*.html'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(gulp.dest('./build/html'));
});
gulp.task('revimg', function() {
    //css，主要是针对img替换
    return gulp.src(['./build/**/rev-images-manifest.json', './build/css/*.css'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(gulp.dest('./build/css'));
});
gulp.task('revjs', function() {
    //css，主要是针对img替换
    return gulp.src(['./build/**/rev-images-manifest.json', './build/js/*.js'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(gulp.dest('./build/js'));
});

//删除Build文件
gulp.task('clean:Build', function () {
   return del([
        './build/**/',
    ]);
});


//执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行
gulp.task('default', gulp.series('clean:Build', gulp.parallel('js','images','style','revHtml'),'rev','revimg','revjs',function(){
    
}))