gulp

gulp使用

1. 在项目根目录下建立gulpfile.js文件
2. 重构文件夹结构src放源码 dist放构建后的文件
3. 在gulpfile.js中编写任务
4. 在命令行执行gulp任务

gulp的方法

gulp.src()获取任务要处理的文件
gulp.dest() 输出文件
gulp.task() 建立gulp任务
gulp.watch()监控文件的变化

const gulp = require('gulp')
    //使用gulp.task建立任务
    //任务的名称
    //任务回调函数
gulp.task('first', () => {
    console.log("第一个gulp");
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'));

});

gulp-cli

安装 npm install gulp-cli -g

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建立任务
//任务的名称
//任务回调函数
gulp.task('first', async() => {
    // console.log("第一个gulp");
    //使用gulp.src获取要处理的文件
    await gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css'));

});
//html任务
gulp.task('htmlmin', async() => {
        await gulp.src('./src/*.html')
            //抽取公共代码
            .pipe(fileinclude())
            //压缩html代码
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest('dist'))
    })
    //css任务
gulp.task('cssmin', async() => {
        await gulp.src(['./src/css/*.less', './src/css/*.css'])
            //将less转换为css
            .pipe(less())
            //压缩css
            .pipe(csso())
            //输出处理结果
            .pipe(gulp.dest('dist/css'))
    })
    //js任务
gulp.task('jsmin', async() => {
    await gulp.src('./src/js/*.js')
        //转换成es5
        .pipe(babel({
            presets: ['@babel/env']
        }))
        //压缩
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})

//复制文件夹
gulp.task('copy', async() => {
    await gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'))
    await gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))

})

//构建任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', () => {}))