gulp极简教程

第一步、全局安装gulp

$ npm install --global gulp

第二步、在你需要打包的目录下执行安装依赖

$ npm install --save-dev gulp

第三步、在该目录下新建一个gulpfile.js文件
gulpfile.js该怎么写呢？
1.先搜索到自己所需要用到的插件，比如gulp-uglify、gulp-csso、gulp-html-minify等等
2.在该目录下通过npm安装这些插件
3.在gulpfile.js中配置这些任务

//引入需要用到的模块
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
const del = require('del');
const csso = require('gulp-csso');
const htmlminfy = require('gulp-html-minify');
const imagemin = require('gulp-imagemin');
const autoprefixer = require('gulp-autoprefixer');
const rev = require('gulp-rev');

var name = "dist";
//通过task配置任务，任务名和执行的函数；
gulp.task('del',() =>
    del('dist')
);

gulp.task('html',() =>
    gulp.src('src/*.html')
        .pipe(htmlminfy())
        .pipe(gulp.dest('./dist'))
);

gulp.task('img',() =>
    gulp.src('src/img/*.{jpg,png,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'))
);

gulp.task('css',() =>
    gulp.src('src/css/*.css')
        .pipe(csso({
            restructure: false,
            sourceMap: true,
            debug: true
        }))
        .pipe(gulp.dest('./dist/css'))
);

gulp.task('js',() =>
    gulp.src('src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify({
            mangle: true,               // 是否修改变量名，默认为 true
            compress: true,             // 是否完全压缩，默认为 true
        }))
        .pipe(javascriptObfuscator())
        .pipe(gulp.dest('./dist/js'))
);

//配置，执行gulp时默认执行的任务，series表示顺序执行。
gulp.task('default',gulp.series('del','html','img','css','js'));

第四步、在该目录下执行gulp命令，执行完成打包