gulp怎么用？快速简单上手版

　　　　【本篇为原创稿，转载请注明来源，谢谢】

  　　　　网上找了很多关于gulp的文章，感觉理论性太强了，对于小白来说就是小马拉大车，我尝试用最简洁的语言讲下gulp的使用，适合新手做项目参考。老学究勿喷

　　　　gulp的作用和目的：去掉空格，简化代码

　　　　名词解释：

　　　　 生产环境——我们把项目写完了,打包上线了,在线上运行的环境

                开发环境——本地编写项目的时候的环境

　　　　gulp使用前准备:

　　　　1.安装全局环境的gulp包：

　npm i -g gulp

　　　　2.初始化文件夹

npm init 

　　　　3.安装生产环境的gulp包

npm i -D gulp

　　　　4.准备gulp启动文件 => 创建文件，命名为gulpfile.js，接下来的代码将在这个js文件里去写

　　　　

　截止到上述4步，基本准备结束。接下来就是根据你的具体需求去下包（通过npm下载功能插件）和写代码了。

　比如，我想实现css代码和js代码压缩功能：

//使用gulp，需要使用require 引入

const gulp = require("gulp");
const cssmin = require("gulp-cssmin");
const rename = require("gulp-rename");
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');


//打包一个css文件
//需要使用gulp-cssmin
// npm install --save-dev gulp-cssmin
// npm网站的实例代码（普通函数）
// gulp.task('default', function () {
//     gulp.src('src/**/*.css')
//         .pipe(cssmin())
//         .pipe(rename({suffix: '.min'}))
//         .pipe(gulp.dest('dist'));
// });

const cssHandler = () => {
    return gulp
        .src('./css/*')   //源文件
        .pipe(cssmin())        //执行CSS文件的压缩 
        .pipe(rename({ suffix: '.min' })) //压缩文件重命名      
        .pipe(gulp.dest('./dist/css'));//导出到目标地址
}

//打包一个js文件，需要下载包：gulp-uglify
// 终端代码：npm install --save-dev gulp-uglify
//如果想把es6代码转化成es5，需要下载包：gulp-babel
// 终端代码：$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

const jsHandler = () => {
    return gulp
        .src('./js/*')   //源文件
        .pipe(babel({
            presets: ['@babel/env']    //babel代码，将es6换成es5语法
        }))
        .pipe(uglify())        //执行CSS文件的压缩 
        .pipe(rename({ suffix: '.min' }))        //执行CSS文件的压缩 
        .pipe(gulp.dest('./dist/js'));
}

module.exports = {
    cssHandler,
    jsHandler,
}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

最后一步，启动js代码，实现文件压缩：

 

gulp jsHandler 　　　　 //运行js压缩代码

gulp cssHandler　　　　//运行css压缩代码

示例：

//使用gulp，需要使用require 引入



const gulp = require("gulp");

const cssmin = require("gulp-cssmin");

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

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

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




//打包一个css文件

//需要使用gulp-cssmin

// npm install --save-dev gulp-cssmin

// npm网站的实例代码（普通函数）

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

//     gulp.src('src/**/*.css')

//         .pipe(cssmin())

//         .pipe(rename({suffix: '.min'}))

//         .pipe(gulp.dest('dist'));

// });



const cssHandler = () => {

    return gulp

        .src('./css/*')   //源文件

        .pipe(cssmin())        //执行CSS文件的压缩 

        .pipe(rename({ suffix: '.min' })) //压缩文件重命名      

        .pipe(gulp.dest('./dist/css'));//导出到目标地址

}



//打包一个js文件，需要下载包：gulp-uglify

// 终端代码：npm install --save-dev gulp-uglify

//如果想把es6代码转化成es5，需要下载包：gulp-babel

// 终端代码：$ npm install --save-dev gulp-babel @babel/core @babel/preset-env



const jsHandler = () => {

    return gulp

        .src('./js/*')   //源文件

        .pipe(babel({

            presets: ['@babel/env']    //babel代码，将es6换成es5语法

        }))

        .pipe(uglify())        //执行CSS文件的压缩 

        .pipe(rename({ suffix: '.min' }))        //执行CSS文件的压缩 

        .pipe(gulp.dest('./dist/js'));

}



module.exports = {

    cssHandler,

    jsHandler,

}