本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

node-gulp插件

发布于2021-05-30 11:53     阅读(1009)     评论(0)     点赞(16)     收藏(3)


gulp

介绍

  • gulp是一个基于 Nodejs 的自动化构建工具,中文主页: http://www.gulpjs.com.cn/
  • 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

使用步骤:

  1. 安装 nodejs。保证 node 是 6 以上的版本。

    C:\Users\AppData\Roaming\npm

  2. 创建一个简单的应用 gulp_test,文件结构如下:

|- gulpfile.js  								//gulp配置文件
|- package.json   不是必须的
  1. 全局安装gulp
    npm install gulp -g   可以使用gulp命令
    
4. 局部安装gulp
  npm install gulp --save-dev   
  1. 配置编码: gulpfile.js

    //引入gulp模块
    const gulp = require('gulp');
    
    //定义任务 第一个参数是任务的名字,第二个参数是执行任务的函数(回调函数)
    gulp.task('任务名', function() {
      console.log("明天放假啦")// 将你的任务的任务代码放在这
    });
    
  2. 构建命令:

    gulp 任务名
    

    The following tasks did not complete: default

    Did you forget to signal async completion?

    错误的解决方法:

    1. 返回一个可读流
    gulp.task('任务名', function() {
     	return fs.createReadeStream(__dirname+"package.json")
    });
    
    1. 传入一个回调并执行
    gulp.task('任务名', function(cb) {
      return cb()
    });
    
    1. 回调函数设置为 async 函数
    gulp.task('任务名', async function() {
      console.log("明天放假啦")// 将你的任务的任务代码放在这
    });
    
    1. 名字如果为default,那么任务名可以省略
    gulp.task('defult', function() {
      console.log("明天放假啦")// 将你的任务的任务代码放在这
    });
    

gulp 插件

gulp-jshint 语法检查:

jshint 选项配置地址 https://jshint.com/docs/options/

.jshintrc 配置参考

{
    "esversion": 6,  
    "asi":true,				// 允许不写结尾处的分号
    "undef": true, 			// 使用之前必须定义
    "devel": true, 			// 没有定义也可以使用 console,alert 进行调试
    "eqeqeq": true,			// 强制使用 === 
    "unused": true, 		// 定义了必须使用
    "globals": { 			// 配置全局变量,直接使用不会报错
        "module": true 
    }
}

使用步骤:

  1. 安装插件
    npm install jshint gulp-jshint --save-dev
    
  2. 引入 jshint:实现语法检查
    const jshint = require('gulp-jshint')
    
  3. 定义任务
    gulp.task('jshint', function() {
      // 将你的任务的任务代码放在这
      return gulp.src('./src/js/*.js')//检查当前目录下src/js的所有JS文件
        .pipe(jshint()) //管道
        .pipe(jshint.reporter('default'));//输出检查结果
    });
    
    4.运行命令
    gulp jshint 

gulp-babel 语法转换

  1. 安装插件:

    npm install --save-dev gulp-babel @babel/core @babel/preset-env
    
  2. 引入:

    const babel = require('gulp-babel');
    
  3. 定义任务:

    gulp.task('babel', () => {
        return gulp.src('./src/js/*.js')
            .pipe(babel({ //进行语法转换
                presets: ['@babel/env']
            })).pipe(gulp.dest('build/js'))//输出到指定目录
    });
    
  4. 运行命令:

    gulp babel
    

经过 babel 转换后的 ES6 模块化语法变成了 CommonJs 语法,还需要用 browserify 转换

gulp-browserify 转换 CommonJs 模块化语法

  1. 安装插件:

    npm install --save-dev gulp-browserify
    
  2. 安装插件(用于重命名)

    npm install --save-dev gulp-rename
    
  3. 引入:

    const browserify = require('gulp-browserify');
    const rename = require('gulp-rename');
    
  4. 定义任务:

    gulp.task('browserify', function() {
      return gulp.src('./build/js/index.js')
        .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('built.js'))			//为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js'))		//输出到指定位置
    });
    
  5. 运行命令

    gulp browserify
    

配置默认任务,让多个任务依次执行

定义默认任务

gulp.task('default', gulp.series('jshint', 'babel', 'browserify'));

gulp-uglify 压缩 JavaScript

  1. 安装插件

    npm install --save-dev gulp-uglify
    
  2. 引入插件

    const uglify = require('gulp-uglify');
    
  3. 定义任务

    gulp.task('uglify', function () {
      return gulp.src('build/js/built.js')
        .pipe(uglify())  //压缩js
        .pipe(rename('dist.min.js'))
        .pipe(gulp.dest('dist/js'))
    });
    
  4. 运行命令

    gulp uglify
    

gulp-less 编译 less 文件及使用 less-plugin-autoprefix 扩展前缀

  1. 安装插件

    npm install gulp-less less-plugin-autoprefix -D
    
  2. 引入插件

    const less = require('gulp-less');
    const LessAutoprefix = require('less-plugin-autoprefix');
    const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });兼容最后2个版本
    
  3. 定义任务:

    gulp.task('less', function () {
      return gulp.src('./src/less/*.less')
        .pipe(less({
          plugins: [autoprefix]//自动扩展前缀
        }))
        .pipe(gulp.dest('./build/css'));
    });
    
  4. 运行命令:

    gulp less 
    

使用 gulp-concat 合并 CSS 文件

  1. 安装插件

    npm install --save-dev gulp-concat
    
  2. 引入

    const concat = require('gulp-concat');
    
  3. 定义任务

    gulp.task('concat', function () {
        return gulp.src('./build/css/*.css')
            .pipe(concat('built.css'))
            .pipe(gulp.dest('./build/css/concat'));
    });
    
  4. 运行命令:gulp concat

gulp-cssmin 压缩 CSS 文件

  1. 安装插件:

    npm install --save-dev gulp-cssmin
    
  2. 引入

    const cssmin = require('gulp-cssmin');
    
  3. 定义任务

    gulp.task('cssmin', function () {
        return gulp.src('build/css/concat/built.css')
            .pipe(cssmin())
            .pipe(rename('dist.min.css'))
            .pipe(gulp.dest('dist/css'));
    });
    

gulp-htmlmin 压缩 HTML 文件

  1. 安装插件
    npm install --save gulp-htmlmin
    
  2. 引入
    const htmlmin = require('gulp-htmlmin');
    
  3. 定义任务
    gulp.task('htmlmin', () => {
      return gulp.src('src/index.html')
        .pipe(htmlmin({
          collapseWhitespace: true ,//去除空格
          removeComments:true //去除注释
        }))
        .pipe(gulp.dest('dist'));
    });
    

自动化配置

  1. 安装模块

    npm install gulp-livereload gulp-connect opn --save-dev
    
  2. 引入模块

    const livereload = require('gulp-livereload');
    const connect = require('gulp-connect');
    const opn = require('opn');
    
  3. 自动执行任务,编译代码

    //1. 在所有可能要执行任务后面加上 .pipe(livereload());
    gulp.task('watch', function () {
        //2. 启动热加载服务
        livereload.listen();
        //3. 通过自己服务器打开项目,自动刷新
        connect.server({
            root: 'dist',
            port: 3000,
            livereload: true  // 自动刷新
        });
        //3. 自动打开浏览器
        opn('http://localhost:3000/index.html');
        //4. 监视指定文件(第一个参数),一旦文件发生变化,就自动执行后面的任务(第二个参数)
        gulp.watch('src/css/*.less', gulp.series(['less', 'concat', 'cssmin']));
        gulp.watch('./src/js/*.js', gulp.series(['jshint', 'babel', 'browserify', 'uglify']));
        gulp.watch('./src/index.html', gulp.series('htmlmin'));
    });
    

备注:必须要在 src 文件夹中修改 index.html 中引入样式和脚本的路径,gulp 不会自动处理路径。

相关插件:

  • gulp-concat : 合并文件(js/css)
  • gulp-uglify : 压缩js文件
  • gulp-rename : 文件重命名
  • gulp-less : 编译less
  • gulp-livereload : 实时自动编译刷新

重要API

  • gulp.src(filePath/pathArr) :
    • 指向指定路径的所有文件, 返回文件流对象
    • 用于读取文件
  • gulp.dest(dirPath/pathArr)
    • 指向指定的所有文件夹
    • 用于向文件夹中输出文件
  • gulp.task(name, [deps], fn)
    • 定义一个任务
  • gulp.watch()
    • 监视文件的变化

原文链接:https://blog.csdn.net/weixin_57218747/article/details/117304119




所属网站分类: 技术文章 > 博客

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/115993/13e500266d2e47d5a50f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)