02.模块加载及包.4.gulp(node第三方模块)

4.第三方模块

4.1 什么是第三方模块

别人写好的,具有特定功能的,我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并放置在一个文件夹中,所以又叫包。
第三方模块有两种存在模式

  • 以js文件的形式存在,提供实现项目具体功能的API接口。
  • 以命令行工具形式存在,辅助项目开发。

4.2 获取第三方模块

npm:node的第三方模块管理工具。

  • 下载:npm install 模块名称
  • 卸载:npm uninstall package 模块名称
    全局安装与本地安装
  • 命令行工具:全局安装
  • 库文件:本地安装

4.3 第三方模块nodemon

nodemon是一个命令行工具,用以辅助项目开发。
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,十分繁琐。
使用步骤:

  1. 使用npm install nodemon -g下载它
    2.在命令行工具中用nodemon命令替代node替代node执行文件

4.4第三方模块 nrm

nrm:npm下载地址切换工具。
npm默认的下载地址在国外,国内下载速度慢。
使用步骤:
1.使用npm install nrm -g下载它
2.查询下载地址列表nrm ls
3.切换下载地址nrm use 下载地址名称

4.5 第三方模块 Gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令,任务就能自动执行。

4.6 Gulp能做什么

  • 项目上线,HTML,CSS,JS文件压缩合并
  • 语法转换(es6,less)
  • 公共文件抽离
  • 修改文件浏览器自动刷新

4.7 Gulp使用

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

4.8 Gulp中提供的方法

  • gulp.src('文件路径'):获取任务要处理的文件
  • gulp.dest('文件路径'):输出文件
  • gulp.task('任务名称',回调函数):建立gulp任务
  • gulp.watch():监控文件的变化
const gulp=require('gulp');
//使用gulp.task()方法建立任务
gulp.task('first',()=>{
    console.log('我的第一个gulp任务执行了');
    //获取要处理的文件
    gulp.src('./src/css/base.css')
    //将处理后的文件输出到dist目录(这里的pipe是执行的意思,把要执行的文件放到pipe里,会自动执行)
    .pipe(gulp.dest('./dist/css'));
});

4.9 Gulp插件(记住名字,现用现查)

  • gulp-htmlmin:压缩html
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        //先抽取公共代码
        .pipe(fileinclude())
        //抽取完公共代码,需要在公共代码原来所在的地方,写一个引入的式子(由include提供):@@include('公共代码文件路径')
        // 压缩html文件中的代码(清除空格)
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});
  • gulp-csso:压缩css
// css任务
// 1.less语法转换
// 2.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'))
});
  • gulp-babel:JS语法转化
// 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-less:less语法转化
  • gulp-uglify:压缩混淆JS
  • gulp-file-include:公共文件包含
  • browsersync:浏览器实时同步
    其他操作:
    复制文件夹:
gulp.task('copy',()=>{
    gulp.src('文件路径')
          .pipe(gulp.desk('文件路径'));
})

执行一个任务,剩下全部执行:

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,410评论 1 11
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,329评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 543评论 0 0
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 957评论 0 3
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,524评论 1 32