node 第三方模块 gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。

Gulp能做什么

项目上线，HTML、CSS、JS文件压缩合并
语法转换（es6、less …）
公共文件抽离
修改文件浏览器自动刷新

gulp使用方法

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

Gulp中提供的方法

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

Gulp示例任务

const gulp = require('gulp');
gulp.task('first', done => {
    //first是任务的名字 第二个参数是回调函数
    //获取想要处理的文件
    console.log('第一个gulp任务开始了');  gulp.src('src/css/base.css').pipe(gulp.dest('dist/css'));
    //将处理后的输出
    done()
});

Gulp插件

Gulp很多功能通过插件完成 具体每个插件如何使用查阅稳定
总体调用插件分三步

1. npm 下载插件
2. 代码中 require引入插件
3. 调用插件
   常用插件如下
   gulp-htmlmin ：html文件压缩
   gulp-csso ：压缩css
   gulp-babel ：JavaScript语法转化
   gulp-less: less语法转化
   gulp-uglify ：压缩混淆JavaScript
   gulp-file-include 公共文件包含
   browsersync 浏览器实时同步

插件使用

const gulp = require('gulp');
//gulp 示例代码
//使用gulp.task()创建任务
gulp.task('first', done => {
    //first是任务的名字 第二个参数是回调函数
    //获取想要处理的文件
    console.log('第一个gulp任务开始了');    gulp.src('src/css/base.css').pipe(gulp.dest('dist/css'));
    //将处理后的输出
    done()
});
//gulp很多功能依靠插件完成
//插件使用 1.下载插件 2.引入插件 3.调用插件
//gulp-htmlmin  html文件压缩
const htmlmin = require('gulp-htmlmin');
//gulp-file-include  公共文件包含
const fileinclude = require('gulp-file-include');
//gulp-less less语法转化
const less = require('gulp-less');
//gulp-csso 压缩css
const csso = require('gulp-csso');
//gulp-babel js语法转化  es6代码转换
const babel = require('gulp-babel');
//gulp-uglify 压缩混淆javas
const uglify = require('gulp-uglify');
//browsersync 浏览器实时同步
//const browsersync = require('browsersync');
//html任务
//1.对html中的代码进行压缩
//2.抽取Html中的公共代码
gulp.task('htmlmin', done => {
    //查找htmlmin文档 找到压缩方法
    // 1.抽取公共代码 2.压缩代码 3.输出  gulp.src('src/*.html').pipe(fileinclude()).pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist'));
    done();
});
//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin', done => {
    //选择css文件与less文件
    gulp.src(['src/css/*.less', 'src/css/*.css'])
        //less转化
        .pipe(less())
        //css压缩
        .pipe(csso())
        .pipe(gulp.dest('dist/css'));
    done();
});
//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin', done => {
    //读取文件
    gulp.src('src/js/*.js')
        //es6转换
        .pipe(babel({
            presets: ['@babel/env']
        }))
        //js代码压缩
        .pipe(uglify())
        //输出
        .pipe(gulp.dest('dist/js'));
    done();
})
gulp.task('copy', done => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
    done();
});
// 构建任务 执行default时依次执行下面的函数
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);