gulp4.0.2使用实例

Posted 2020-12-18 shenzs

gulpfile.js

const gulp = require(‘gulp‘);
const cssnano = require(‘gulp-cssnano‘);
const sass = require(‘gulp-sass‘);
const rename = require(‘gulp-rename‘);
const js = require(‘gulp-uglify‘);
const image_min = require(‘gulp-imagemin‘);
const cache = require(‘gulp-cache‘);
const pipeline = require(‘readable-stream‘).pipeline;
// const bs = require("browser-sync").create();
const connect = require(‘gulp-connect‘);

// gulp.task(‘bs‘, function () {
//     bs.init({
//         ‘server‘:{
//             ‘baseDir‘:‘./‘
//         }
//     })
// });


gulp.task(‘css‘, function () {
    return pipeline(
        gulp.src(‘./css/*.scss‘),
        sass(),
        gulp.dest(‘./dist/css‘),
        cssnano(),
        rename({‘suffix‘: ‘.min‘}),
        gulp.dest(‘./dist/css/‘),
        connect.reload(),
        // bs.stream()
    )


});

gulp .task(‘js‘, function () {
    return pipeline(
        gulp.src(‘./js/*.js‘),
        js({
            ‘toplevel‘:true,
            ‘compress‘:{
                ‘drop_console‘:true,
            }
        }),
        rename({‘suffix‘: ‘.min‘}),
        gulp.dest(‘./dist/js‘),
        connect.reload(),

        // bs.stream()
        )

});
gulp.task(‘html‘, function () {
    return pipeline(
        gulp.src(‘./html/*.html‘),
        gulp.dest(‘./dist/html/‘),
        connect.reload(),
        // bs.stream()
    )
});
gulp.task(‘image‘, function () {
    return pipeline(
        gulp.src(‘./image/*.*‘),
        cache(image_min()),
        gulp.dest("./dist/image/"),
        connect.reload(),
        // bs.stream()

    )
});

gulp.task("watch",function () {
    gulp.watch("css/*.css",gulp.parallel([‘css‘]));
    gulp.watch("html/*.html",gulp.parallel([‘html‘]));
    gulp.watch("image/*.*",gulp.parallel([‘image‘]));
    gulp.watch("js/*.js",gulp.parallel([‘js‘]));
});

gulp.task(‘server‘, function () {
    connect.server({
        root: ‘./‘,
        port: 8888,
        livereload: true
    })
});

gulp.task(‘default‘, gulp.parallel([‘watch‘, ‘server‘]));

package.json

{
  "name": "zhutou",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp-cli": "^2.3.0"
  },
  "devDependencies": {
    "browser-sync": "^2.26.10",
    "gulp": "^4.0.2",
    "gulp-cache": "^1.1.3",
    "gulp-connect": "^5.7.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^7.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "readable-stream": "^3.6.0"
  }
}