node里面的Gulp模块（1）

第三方模块Gulp

基于node平台开发的前端构建工具

• 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了，用机器代替手工，提高开发效率

• Gulp能做什么？
  • 项目上线，HTML、CSS、JS文件压缩合并
  • 语法转换(ES6、less...)
  • 公共文件抽离
  • 修改文件浏览器自动刷新

Gulp的使用

1. 使用npm install gulp下载gulp文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目文件夹结构，src目录放置源代码文件，dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

Gulp中提供的方法

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

const gulp = require('gulp');
// 使用gulp.task()方法建立任务
// 任务的名称  任务的回调函数
gulp.task('first', () => {
    // 获取要处理的任务
    gulp.src('./src.css/base.css')
        // 将处理后的文件输出到dist目录
        .pipe(gulp.dest('./dist/css'));
});

Gulp插件

• gulp-htmlmin：html文件压缩
• gulp-csso：css文件压缩
• gulp-babel：JavaScript语法转换
• gulp-less：less语法转换
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include：公共文件包含
• browsersync：浏览器实时同步

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');
// html任务
// html文件代码压缩操作  抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的公共代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});

// CSS任务
// less代码语法转换   css代码压缩
gulp.task('cssmin', () => {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理后的结果进行输出
        .pipe(gulp.dest('dist/css'))
});

// JavaScript任务
// ES6语法转换  JS代码压缩
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'));
})

最近作业有点多，所以整理的比较少🆒毕竟临近毕业了，再不努把力就该……