The packaging series | gulp configuration”

Gulp is also not very familiar with gulp, which, unlike rollup, writes its configuration using the commonJS specification. The configuration file is called gulpfile.js and features streaming configuration. Package by defining a list of tasks and then grouping them together. Install via NPM I gulp -g

The following is a configuration of gulp written by others online

But I did not verify whether it is correct, but in fact the configuration is so the matter, in the NPM source, one by one to check the plugins from webpack, all need to know which plugins, but the plugin prefix name is gulp-xxx good

	let gulp = require('gulp');
    let sass = require('gulp-sass');  // sass -> css
    let prefixer = require('gulp-autoprefixer');  // Add the prefix
    let minify = require('gulp-minify-css');  / / CSS compression
    let notify = require('gulp-notify');  // Print a reminder statement
    let concat = require('gulp-concat');  / / merge
    let gulp = require('gulp');
    let imagemin = require('gulp-imagemin');
    let cache = require('gulp-cache');  // Reduce repeated compression

    // Check the script
    gulp.task('lint'.function() {
        gulp.src('./static/src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))});/ / compile Sass
    / / compile Sass
    gulp.task('css'.function() {  / / task name
        gulp.src('sass/*.scss')  // Target sass file
            .pipe(sass())  // sass -> css
            .pipe(prefixer('last 2 versions'))  / / parameter configuration reference < https://github.com/ai/browserslist >
            .pipe(minify())  / / compression
            .pipe(gulp.dest('css'))  // Target directory
            .pipe(notify({message: 'done'}))
            .pipe(concat('all.min.css'))  / / merge
            .pipe(gulp.dest('css'));  // Target directory
    });

    // Compress the image
    gulp.task('imagemin'.function() {
        gulp.src('src/images/*')
            .pipe(cache(imagemin({ optimizationLevel: 3.progressive: true.interlaced: true })))
            .pipe(gulp.dest('dist/images/'));
    });

    // Merge and compress js files
    gulp.task('scripts'.function() {
        gulp.src('./static/src/js/*.js')
            .pipe(concat('all.js'))  / / merge
            .pipe(gulp.dest('./static/dist/js'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./static/dist/js'));
    });

    // Default task
    gulp.task('default'.function(){
        gulp.run('lint'.'sass'.'imagemin'.'scripts');

        // Listen for file changes
        gulp.watch([
            './static/src/scss/*.scss'.'./static/src/images/**'.'./static/src/js/*.js'].function(){
            gulp.run('lint'.'sass'.'imagemin'.'scripts');
        });
    });
Copy the code

This is the code

Gulp configuration code