使用gulp插件的例子

使用gulp插件的例子

使用步骤
1、使用npm install gulp下载gulp库文件
2、在项目的根目录下建立 gulpfile.js文件
3、在项目的文件夹中创建src文件夹放置项目的源文件，创建dist目录放置处理之后的源文件
4、在gulpfile.js文件中写任务 在使用响应的模块之前要下载相应的模块
5、在命令行中执行gulp任务
//具体插件的使用方法可以在gulp中文网中查看

// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
//使用gulp.task()方法建立任务
//参数
//1.任务的名称
//2.任务的回调函数
gulp.task('first', (done) => {
    console.log('第一个gulp执行了');
    //1、使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'))
    done();
});

//html
//1.html文件代码中的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    //路径
    gulp.src('./src/*.html')
        //使用插件处理文件
        .pipe(fileinclude())
        //压缩html文件中的代码
        //使用插件处理文件
        .pipe(htmlmin({ collapseWhitespace: true }))
        //输出文件
        .pipe(gulp.dest('dist'));
})


//css任务
//1.less语法转换
//2.css代码的压缩
gulp.task('cssmin', () => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
})

//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            //它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});
//复制文件夹
gulp.task('copy', () => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
})

//构建任务
gulp.task('default', ['htmlmin', 'jsmin', 'cssmin', 'copy'])