- 首先 npm init 创建一个 package.json
- 在 package.json 里面添加一个配置项中添加 bin
“bin”: {
“pages-boilerplate”: “cli.js”
},
- 在根目录下创建一个cli.js文件,里面写下面的内容,顶格写注释(必写)
#!/usr/bin/env node
console.log(‘cli working!’)
- 在当前目录中运行npm link,会自动创建一个package-lock.json文件
花括号里的name,是启动命令,可以换
- 当前目录运行node-cli
node-cli
cli working!
- 这样入口文件就搭建完毕了~
- 安装两个npm模块
用于命令行交互
npm install inquirer
用于模板引擎渲染
npm install ejs
- 编写 cli.js
#! /usr/bin/env node
// console.log('toy cli 入口文件');
const inquirer = require('inquirer')
const path = require('path')
const fs = require('fs')
const ejs = require('ejs')
// 命令行询问配置项
const {
selectConfig} = require('./select.config')
inquirer.prompt(selectConfig).then(answer => {
const tmpl = path.join(process.cwd(),'template');
const dist = process.cwd()
fs.readdir(tmpl,(err,files)=>{
if(err) throw err;
files.forEach(file=>{
// console.log(path.join(tmpl,file));
ejs.renderFile(path.join(tmpl,file),answer,(renderErr,res)=>{
if(renderErr) throw renderErr;
let sonDir = path.join(dist,'dist')
fs.mkdir(sonDir, {
recursive: true}, (err) => {
if (err) throw err;
fs.writeFileSync(path.join(sonDir,file), res);
});
})
})
})
})
- 创建另一个文件夹,使用命令行
node-cli
? Project name? myProject
可以看到在新的项目中,生成了两个文件 index.html style.css
- 下面使用 Gulp 构建
主要任务:
gulp-sass 编译scss文件
gulp-babel 编译JS
gulp-imagemin 处理图片、 字体
拷贝静态资源
gulp-swig 处理HTML模板文件
browser-sync 搭建开发服务器
监听文件改变
gulp-useref gulp-if文件引用处理
gulp-load-plugins 自动加载插件
组合任务:
develop 用于开发环境
build 用于生产
// 实现这个项目的构建任务
const {
src, dest, watch, series, parallel } = require('gulp')
const del = require('del')
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const imagemin = require('gulp-imagemin')
// const swig = require('gulp-swig')
// const ifg = require('gulp-ifg')
// const useref = require('gulp-useref')
// const uglify = require('gulp-uglify')
// const cleanCss = require('gulp-load-plugins')
const glupLoadPulgins = require('gulp-load-plugins')
const plugins = glupLoadPulgins()
// 创建开发服务器
const browserSync = require('browser-sync')
const bs = browserSync.create()
const data = {
pkg: require('./package.json')
}
// 编译sass
const style = () => {
return src('src/assets/styles/*.scss', {
base: 'dist' })
.pipe(sass({
'src/assets/styles/*.scss' }))
.pipe(dest('temp'))
}
// js
const script = () => {
return src('src/assets/scripts/*.js', {
base: 'dist' })
.pipe(plugins.babel({
presets: [@bable/preset-evn] }))
.pipe(dest('temp'))
}
// 处理HTML文件
const html = () => {
return src(['src/*.html', {
base: 'dist' })
.pipe(plugins.swig({
data: {
pkg: data } }))
.pipe(dest('temp'))
}
// 处理图片
const img = () => {
return src('src/assets/images/**')
.pipe(plugins.imagemin())
.pipe(dest('dist/img'))
}
// 处理文字
const font = () => {
return font = () => {
return src('src/assets/fonts/**')
.pipe(plugins.imagemin())
.pipe(dest('dist/font'))
}
}
// 拷贝静态资源
const extra = () => {
return src('public/**')
.pipe(dest('dist/public'))
}
// 清除构建后的目录
const clean = () => {
return del(['dist'])
}
const serve = () => {
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', html)
// watch('src/assets/fonts/**', font)
// watch('src/assets/images/**', img)
// watch('public/**', extra)
watch([
'src/assets/fonts/**',
'src/assets/images/**',
'public/**'
], bs.reload)
bs.init({
notify: false,
files: 'dist/**',
server: {
baseDir: ['dist', 'src', 'public'],
routes: {
'./node_modules': 'node_modules'
}
}
})
}
// 文件引用处理
const useref = ()=>{
return src('temp/*.html', {
base: 'dist' })
.pipe(plugins.useref({
searchPath:['dist','.']}))
.pipe(plugins.if(/\.js$/,plugins.uglify()))
.pipe(plugins.if(/\.html$/,plugins.htmlmin({
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true
})))
.pipe(plugins.if(/\.css$/,plugins.cleanCss()))
.pipe(dest('dist'))
}
// develop 用于开发环境
// build 用于生产环境
const compile = parallel(style, script, html)
const build = series(clean, parallel(series(compile, useref), img, font, ,extra))
const develop = series(compile, serve)
module.exports = {
clean,
compile,
build,
develop,
}