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', () => {}))