七三笔记

系统环境 generator-express Glob gulp Babel Font JQuery bootstrap Pug 参考

系统环境

ubantu20,gcc12,python3 v18.19 二进制安装

 
cd /wks/nodejs/app/
wget https://nodejs.org/dist/v18.19.0/node-v18.19.0-linux-x64.tar.xz
tar -xvf node-v18.19.0-linux-x64.tar.xz

vim  ~/.bashrc 

export NODEWKS=/wks/nodejs
export NODE_BASE=$NODEWKS/app/node-v18.19.0-linux-x64
export PATH=$NODE_BASE/bin:$PATH
export NODE_GLOBAL=$NODE_BASE/global
export PATH=$NODE_GLOBAL/bin:$PATH

. ~/.bashrc

$ which node
/wks/nodejs/app/node-v18.19.0-linux-x64/bin/node


下面的设置会替代NODE_PATH的作用
mkdir -p $NODE_BASE/{global,cache}
npm config set prefix "$NODE_BASE/global"
npm config set cache "$NODE_BASE/cache"

npm install -g npm@10.2.5 

npm install -g yarn

下面的根据需要安装，不需要就不用设置
yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/

ubantu20,gcc12,python3 v20.9编译安装

 
node20要求gcc10,glic2.28,python3，
但sass要求Python2,但同时ubantu20已不支持python2了
不用sass的可以用这个方案  

wget https://nodejs.org/dist/v20.9.0/node-v20.9.0.tar.gz
tar -xvf node-v20.9.0.tar.gz
cd node-v20.9.0
mkdir /wks/nodejs/app/node20
# ./configure --prefix=/wks/nodejs/app/node20
make 
make install 

下面的设置会替代NODE_PATH的作用
mkdir -p /wks/nodejs/app/node20/{global,cache}
npm config set prefix "/wks/nodejs/app/node20/global"
npm config set cache "/wks/nodejs/app/node20/cache"


npm install -g yarn

下面的根据需要安装，不需要就不用设置
yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/


NODE_GLOBAL就是上面global的路径，将全局安装的包加到PATH路径中

将npm的版本降到8.5.5这个解决兼容python，让node可以兼容python3
npm install -g npm@8.5.5

vim ~/.bashrc 
export NODEWKS=/wks/nodejs 
export NODE_BASE=$NODEWKS/app/node20
export PATH=$NODE_BASE/bin:$PATH
export NODE_GLOBAL=$NODE_BASE/global
export PATH=$NODE_GLOBAL/bin:$PATH

. ~/.bashrc

$ npm -v
8.5.5

centos7,gcc10,python2+python3

 
centos7属于老一代，就是我那个时代的产物，比较稳定，升级一下gcc还能用，目前很多软件还是依赖于这个环境的
这里使用codna安装一个Python3,可以方便创建各种python版本的环境

cat centos-7-x86_64.tar.gz |docker import - cent7
docker run -itd --privileged --name nd -h nd --net=host -v /tmp:/tmp  cent7  bash
alias nd="docker exec -it nd bash"

yum install -y net-tools libaio numactl gcc gcc-c++ autoconf make openssl-devel bzip2-devel

### gcc 升级
yum install centos-release-scl
yum install devtoolset-10-gcc*
/usr/bin/scl enable devtoolset-10 bash

adduser xt
vim /etc/sudoers.d/xt
%xt ALL=(ALL) NOPASSWD:ALL

mkdir -p /wks/nodejs/app 
chown -R xt.xt /wks
sudo mkdir -p /ai/app 
chown -R xt.xt /ai 
cd /ai/app 
cp /tmp/Anaconda3-2022.10-Linux-x86_64.sh ./

su - xt

cd /ai/app 
sh Anaconda3-2022.10-Linux-x86_64.sh 
[/home/xt/anaconda3] >>> /wks/app/anaconda3
exit 
su - xt 

cd /wks/nodejs/app/
wget https://nodejs.org/dist/v14.21.3/node-v14.21.3-linux-x64.tar.xz
tar -xvf node-v14.21.3-linux-x64.tar.xz

vim  ~/.bash_profile 

export NODEWKS=/wks/nodejs
export NODE_BASE=$NODEWKS/app/node-v14.21.3-linux-x64
export PATH=$NODE_BASE/bin:$PATH
export NODE_GLOBAL=$NODE_BASE/global
export PATH=$NODE_GLOBAL/bin:$PATH

. ~/.bash_profile 

$ which node
/wks/nodejs/app/node-v14.21.3-linux-x64/bin/node


下面的设置会替代NODE_PATH的作用
mkdir -p $NODE_BASE/{global,cache}
npm config set prefix "$NODE_BASE/global"
npm config set cache "$NODE_BASE/cache"

npm install -g yarn

下面的根据需要安装，不需要就不用设置
yarn config set -g registry http://mirrors.cloud.tencent.com/npm/
yarn config set -g sass_binary_site http://mirrors.cloud.tencent.com/npm/node-sass/


将npm的版本降到8.5.5这个解决兼容python，让node可以兼容python3
npm install -g npm@8.5.5

. ~/.bash_profile 

$ npm -v
8.5.5

generator-express

yo 框架

 
https://www.npmjs.com/package/generator-express

mkdir /opt/blog
cd /opt/blog 

yarn global add yo@4.3.1
yarn global add generator-express@2.17.2 
yarn global add npm-check 
以上三个包建议使用全局安装

添加环境变量
vim ~/.bash_profile
export PATH=/wks/blog/node_modules/.bin:$PATH

. ~/.bash_profile

yo express
(base) [xt@py1 blog]$ yo express
? Would you like to create a new directory for your project? No
? Select a version to install: Basic
? Select a view engine to use: Pug
? Select a css preprocessor to use: Sass
? Select a build tool to use: Gulp

npm-check检测最新依赖包安装

 
npm-check -u 
按空格 选中,全部更新 

(base) [xt@py1 blog]$ npm-check -u
? Choose which packages to update. 
 Major Update Potentially breaking API changes. Use caution.
 ◉ pug                     2.0.4   ❯  3.0.2   https://pugjs.org
 ◉ chai devDep             3.5.0   ❯  4.3.7   http://chaijs.com
 ◉ debug devDep            2.6.9   ❯  4.3.4   https://github.com/debug-js/debug#readme
 ◉ gulp devDep             3.9.1   ❯  4.0.2   https://gulpjs.com
 ◉ gulp-sass devDep        3.2.1   ❯  5.1.0   https://github.com/dlmanning/gulp-sass#readme
 ◉ gulp-livereload devDep  3.8.1   ❯  4.0.2   https://github.com/vohof/gulp-livereload#readme
 ◉ mocha devDep            4.1.0   ❯  10.2.0  https://mochajs.org/
 ◉ nyc devDep              10.3.2  ❯  15.1.0  https://istanbul.js.org/
❯◉ supertest devDep        2.0.1   ❯  6.3.3   https://github.com/visionmedia/supertest#readme

Glob

Glob用于匹配文件并读取

 
https://www.npmjs.com/package/glob
Match files using the patterns the shell uses.

// load using import
import { glob, globSync, globStream, globStreamSync, Glob } from 'glob'
// or using commonjs, that's fine, too
const {
  glob,
  globSync,
  globStream,
  globStreamSync,
  Glob,
} = require('glob')

// or default export is fine too, just returns the glob function
// with all the aliases attached.
import glob from 'glob'
// or using commonjs
const glob = require('glob')

// the main glob() and globSync() resolve/return array of filenames

// all js files, but don't look in node_modules
const jsfiles = await glob('**/*.js', { ignore: 'node_modules/**' })

// pass in a signal to cancel the glob walk
const stopAfter100ms = await glob('**/*.css', {
  signal: AbortSignal.timeout(100),
})

// multiple patterns supported as well
const images = await glob(['css/*.{png,jpeg}', 'public/*.{png,jpeg}'])

// but of course you can do that with the glob pattern also
// the sync function is the same, just returns a string[] instead
// of Promise
const imagesAlt = globSync('{css,public}/*.{png,jpeg}')

// you can also stream them, this is a Minipass stream
const filesStream = globStream(['**/*.dat', 'logs/**/*.log'])

gulp

 
A toolkit to automate & enhance your workflow

https://gulpjs.com/
https://gulpjs.com/docs/en/getting-started/quick-start 

gulp的作用就是在启动项目时执行一些自定义的命令
gulp4.0之前使用task方法，4.0之后不再使用，项目初始化时使用的gulp3,
更新为 gulp4之后，需要修改gulpfile.js文件

$ npm -v
6.14.13
$ npx -v
6.14.13

$ which gulp
/opt/blog/node_modules/.bin/gulp
$ gulp -version
CLI version: 2.3.0
Local version: 4.0.2

gulp4示例

 
备份一下/opt/blog目录下的gulpfile.js文件，创建一个新的gulpfile.js文件，写入以下内容

function mycode(){
  let a = 1;
  let b = 2;
  console.log("my code: a+b=",a+b);
}

function defaultTask(cb) {
  // place code for your default task here
  mycode();
  cb();
}

exports.default = defaultTask

然后在项目目录下执行gulp
$ gulp
[03:31:16] Using gulpfile /opt/blog/gulpfile.js
[03:31:16] Starting 'default'...
my code: a+b= 3
[03:31:16] Finished 'default' after 1.52 ms

gulp4将图片从开发目录同步到另外一个目录

 
const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const plumber = require('gulp-plumber');
const livereload = require('gulp-livereload');

//-------------------img-------------------------------------------------
function img(cb){
    gulp.src('./src/img/*.*')
    .pipe(gulp.dest('./public/img/'))
    .pipe(livereload());
    cb();
}

function watch(cb){
    gulp.watch('./src/img/*.*', gulp.parallel(img));
    cb();
}

function develop(cb){
    livereload.listen();
    nodemon({
    script: 'app.js',
    ext: 'js coffee pug',
    stdout: false
    }).on('readable', function () {
    this.stdout.on('data', (chunk) => {
        if (/^Express server listening on port/.test(chunk)) {
        livereload.changed(__dirname);
        }
    });
    this.stdout.pipe(process.stdout);
    this.stderr.pipe(process.stderr);
    });
    cb();
}

//在项目启动前并行处理一系列方法
exports.default = gulp.parallel(img, watch, develop);

Babel

 
Babel 是一个 JavaScript 编译器, 将ES6转换为浏览器识别的JS语法 
https://www.npmjs.com/package/Babel

中文网站
https://www.babeljs.cn/

项目初始化

 
cd /opt/blog 

静态文件目录
mkdir -p src/{js,css,img}

Font

 
https://www.npmjs.com/
fontawesome-free 
https://www.npmjs.com/package/@fortawesome/fontawesome-free

npm i @fortawesome/fontawesome-free

// 静态资源设置
app.use('/fontawesome', express.static(config.root + '/node_modules/@fortawesome/fontawesome-free'));

JQuery

 
npm i jquery

https://www.npmjs.com/package/jquery

// 静态资源设置
app.use('/jquery', express.static(config.root + '/node_modules/jquery/dist'));

bootstrap

 
// 静态资源设置
app.use('/bootstrap', express.static(config.root + '/node_modules/bootstrap/dist'));

Pug

 
https://pugjs.org/api/getting-started.html

npm install pug

app.set('view engine', 'pug');

//- template.pug
p #{name}'s Pug source code!

 
//- layout.pug
html
    head
    title My Site - #{title}
    block scripts
        script(src='/jquery.js')
    body
    block content
    block foot
        #footer
        p some footer content

extends,include

 
//- page-a.pug
extends layout.pug

block scripts
    script(src='/jquery.js')
    script(src='/pets.js')

block content
    h1= title
    - var pets = ['cat', 'dog']
    each petName in pets
    include pet.pug

Block append / prepend

 
Pug allows you to replace (default), prepend, or append blocks.

 
//- layout.pug
html
    head
    block head
        script(src='/vendor/jquery.js')
        script(src='/vendor/caustic.js')
    body
    block content

 
//- page.pug
extends layout.pug

block append head
    script(src='/vendor/three.js')
    script(src='/game.js')

When using block append or block prepend, the word “block” is optional:

 
//- page.pug
extends layout

append head
    script(src='/vendor/three.js')
    script(src='/game.js')

layout在上级目录及class的添加

 
extends ../layout

append css
    link(rel='stylesheet', href='/css/blog/index.css')

block content
    include ../include/nav.pug

    .container 
    .row 
        div(class=['col-x1-1','col-lg-2'])
        ul.list-group
            a.list-group-item.list-group-item-action(href='#') 热门博客

参考

七三笔记路线：学习，记录，分享