Babel和eslint及gulp的安装使用

简介

  • babel: 用作将ES6代码转换为ES5
  • eslint: JS代码检查工具
  • gulp: 代码压缩工具
  • 需要nodejs
  • 使用的IDE为PhpStorm

npm相关命令

  • npm init 初始化本地项目
  • –save 添加到package.json的依赖项
  • –save-dev 添加到package.json的开发环境依赖项

本地项目初始化

  1. npm init(在PhpStorm里面可以按alt+F12呼出Terminal面板)
  2. 一路回车或者查看它询问的问题作出适当调整

安装babel到本地项目

  1. 在命令行窗口输入并且添加到开发依赖项
    npm install --save-dev babel-cli babel-preset-env
  2. 创建.babelrc文件
  3. 输入下列代码:
    {
        "presets":["env"]
    } 
    
  4. 在Phpstorm中设置
    1. 点击file->settings->tools->file watchers->+(旁边绿色的+)
    2. 选择babel
    3. 如果是全局安装它能自动配置,仅项目安装不一定,如果弹出面板的Watcher Settings下面Program不是指向安装的地址需要手动更改
      示例图

安装eslint到本地项目

  1. npm install --save-dev eslint
  2. ./node_modules/.bin/eslint --init初始化配置文件
    • 如果提示啥不是内部命令等,输入powershell进入win10的powershell
    • 键入完毕应该共有三个选项
    • Answer questions about your style 设置你自己的样式
    • Use a popular style guide 使用流行的配置
    • Inspect your JavaScript file(s) 验证js文件
    • 这里不是验证文件所有选择上面两个任意一个
  3. 一路回车或者查看它询问的问题作出适当调整
  4. 为Phpstorm启用eslint
    1. 点击file->setting->languages & frameworks->javascript->code quality tools->eslint
    2. node interpreter 选择node目录(一般会自己查找)
    3. eslint package 选择eslint目录(项目根目录的node_modules\eslint)
    4. 下面是eslint的配置,直接选择 automatic search.它会自动查找eslint初始化生成的配置文件
    5. 保存应用

关于Eslint的配置文件

  1. 官方配置文档链接
  2. 我的配置:
    {
    "env": {
        "browser": true,
        "node":true,
        "commonjs": true,
        "es6": true
        },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
        },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            0,
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars":"warn"
        }
    }
    

配置gulp到本地项目

  1. 下载所需要的包,(我需要压缩js,css代码所以只用几个)
    npm install --save-dev gulp gulp-uglify gulp-minify-css gulp-rename
  2. 同样需要配置文件(这里需要个表情),建立一个名为gulpfile.js的文件.添加配置代码
    let gulp = require('gulp');
    let uglify = require('gulp-uglify');// 压缩js代码
    let minifycss = require('gulp-minify-css');// 压缩css代码
    let rename = require('gulp-rename');// 重命名
    // 压缩js代码
    gulp.task('scripts', function () {
    gulp.src('dist/js/main.js')
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('./js/'));
    });
    gulp.task('styles', function () {
    gulp.src('css/main.css')
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('./css/'));
    });
    gulp.task('default', function () {
        gulp.start('styles',"scripts");
    });
    

    首先包含必要的文件,使用gulp.task创建任务,gulp.src包含入口文件(多个文件使用数组传入)然后执行压缩重命名加上.min,gulp.dest输出到指定文件夹
    gulp默认执行的是default,使用gulp.start开始执行压缩的任务
    gulp还有比如压缩图片,合并文件等功能
    注意:如果文件包含错误语法等会导致无法完成压缩

  3. 配置好了文件就可以在PhpStorm的Terminal里面输入gulp(不是全局安装的需要引入目录.\node_modules\.bin\gulp.cmd)然后回车执行任务

后言

这篇文章包含太多问题并且不详细,如果你出现了什么问题欢迎评论留言或者@我Email大部分时间在线同时也欢迎各位大佬指出问题帮助我

分享 二维码
分类:代码笔记
1 条评论


在此输入评论..
0/100
  • neio
    11个月前 [12-05]
    四川成都

    唉,真悲哀.一个人都没有.孤零零的~