前端 package build 練習

發表於 更新於 分類於 Disqus：
文章字數： 2.6k 所需閱讀時間 ≈ 2 分鐘

試 bulid

  1. NODE_ENV 不是内部或外部命令，也不是可運行的程序，或者批處理文件
    以下兩條腳本都合併兩條命令（這種操作在powershell中不被支持，在cmd中也不被支持，這是Mac中bash或Linux的shell中的獨特操作），拆分兩條腳本如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "gulp": "NODE_ENV='development' gulp",
  "gulp-build": "NODE_ENV='production' gulp",
  "dev": "npm run gulp",
  "start": "npm run gulp",
  "build": "npm run gulp-build"
},

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "gulp": "set NODE_ENV='development' && gulp",
  "gulp-build": "set NODE_ENV='production' && gulp",
  "dev": "npm run gulp",
  "start": "npm run gulp",
  "build": "npm run gulp-build"
},
  1. build 
1
2
3
4
# npm install 會有一些問題
yarn install
yarn run dev
yarn run build

copy bulid

  1. install gulp
1
2
3
4
5
6
7
8
9
10
# install gulp-cli
npm install --global gulp-cli
# generate package.json
yarn init
# install gulp 
yarn add gulp
# gulp version
gulp -v
	CLI version: 2.3.0
	Local version: 4.0.2
  1. add gulpfile.js example
1
2
3
4
5
6
7
8
9
10
// gulpfile.js
const gulp = require('gulp');

gulp.task('default', defaultTask);

function defaultTask(done) {
  // place code for your default task here
  console.log('Hello World!');
  done();
}
  1. run gulp
1
2
3
4
5
gulp
	[10:58:38] Using gulpfile D:\work\git-test\mt
	[10:58:38] Starting 'default'...
	Hello World!
	[10:58:38] Finished 'default' after 3.67 ms
  1. copy all file the install package
1
2
3
4
5
6
7
8
# add gulp package #1
yarn add gulp-concat gulp-csso gulp-fontmin-woff2 gulp-imagemin gulp-postcss gulp-pug gulp-rename gulp-sass gulp-sourcemaps gulp-uglify
# add gulp package #2
yarn add gulp-connect gulp-if gulp-svg-sprite
# add other package #1
yarn add postcss-uncss autoprefixer del browserify babelify vinyl-source-stream glob event-stream vinyl-buffer merge-stream
# add other package #2
yarn add uncss @babel/core sass bootstrap rfs @babel/plugin-transform-runtime @babel/preset-env chart.js jquery clipboard smoothscroll-polyfill vanilla-lazyload rellax @popperjs/core
  1. some issue for package version dependence
1
2
3
4
5
6
7
8
9
# DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
# "gulp-sass": "^5.0.0" --> "gulp-sass": "^4.0.2",
# yarn add gulp-sass@4.0.2 --tilde 表 4.0.2 之後的版本
yarn remove gulp-sass 
yarn add gulp-sass@4.0.2 --tilde

# Error: PostCSS plugin autoprefixer requires PostCSS 8.
yarn remove autoprefixer 
yarn add autoprefixer@9.7.6 --tilde
  1. build 
1
2
yarn run dev
yarn run build