gulp-babel-al752 v1.0.0

安装 gulp

npm gulp-cli -g  //全局安装

gulp-sass 编译sass文件

//npm
$ npm i gulp-sass -D
$ npm i node-sass -D

const gulp = require('gulp');
const gulpSass = require('gulp-sass');    //编译sass

gulp.task('buildSass',()=>{
    return gulp.src('路径')
        .pipe(gulpSass())
        .pipe(gulp.dest('输出路径'))     
})

gulp-babel ECMA Script 高版本降低版本

//Babel 7 npm
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env


const gulp = require('gulp');
const babel = require('gulp-babel');   //降低ECMA Script版本


gulp.task('buildJs',()=>{
    return gulp.src('路径')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('输出路径'))
})

gulp-clean-css 压缩CSS文件

//npm
$ npm install gulp-clean-css -D

const gulp = require('gulp');
const cleanCss = require('gulp-clean-css'); //压缩css

gulp.task('buildCss',()=>{
    return gulp.src('路径')
        .pipe(cleanCss())
        .pipe(gulp.dest('输出路径'))
})

gulp-htmlmin 压缩html

//npm
$ npm gulp-htmlmin -D

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');  //压缩html

gulp.task('buildHtml',()=>{
    return gulp.src('路径')
        .pipe(htmlmin({
            collapseWhitespace:true, //压缩HTML 清除空格
            removeComments:true,     //清除注释
            minifyJS:true，   //压缩页面JS
            minifyCSS:true    //压缩页面CSS
        }))
        .pipe(gulp.dest("输出路径"))
})

gulp-uglify 压缩JS

$ npm gulp-uglify -D 

const gulp = require('gulp');
const uglify = require('gulp-uglify');    //压缩js

gulp.task('buildJsmin',()=>{
    return gulp.src('路径')
        .pipe(uglify())
        .pipe(gulp.dest('输出路径'))
})

gulp-rename 修改输出文件名

//npm
$ npm gulp-rename -D

const gulp = require('gulp');
const rename = require('gulp-rename');

gulp.task('buildSass',()=>{
    return gulp.src('路径')
        .pipe(rename((path)=>{
            path.basename += ".min"  //文件名加.min
        }))
        .pipe(gulp.dest('输出路径'))     
})

未完待续···