# cong-pages > > 使用gulp开发的静态网站工作流 Latest version **1.0.2** (published 2021-12-27) · ISC license · 0 weekly downloads ## Install ```sh npm install cong-pages pnpm add cong-pages yarn add cong-pages bun add cong-pages ``` Provides the command `cong-pages`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2021-12-27 | | First published | 2021-12-26 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 16 | | Unpacked size | 9.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | cong | | Maintainers | cong-web-developer | ## Links - npm: https://www.npmjs.com/package/cong-pages - npm.io page: https://npm.io/package/cong-pages ## Dependencies (16) - [del](https://npm.io/package/del.md) ^5.1.0 - [gulp](https://npm.io/package/gulp.md) ^4.0.2 - [sass](https://npm.io/package/sass.md) ^1.45.1 - [gulp-if](https://npm.io/package/gulp-if.md) ^3.0.0 - [gulp-sass](https://npm.io/package/gulp-sass.md) ^5.0.0 - [gulp-swig](https://npm.io/package/gulp-swig.md) ^0.9.1 - [gulp-babel](https://npm.io/package/gulp-babel.md) ^8.0.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.5 - [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^3.0.2 - [gulp-useref](https://npm.io/package/gulp-useref.md) ^5.0.0 - [browser-sync](https://npm.io/package/browser-sync.md) ^2.27.7 - [gulp-htmlmin](https://npm.io/package/gulp-htmlmin.md) ^5.0.1 - [gulp-imagemin](https://npm.io/package/gulp-imagemin.md) ^7.0.0 - [gulp-clean-css](https://npm.io/package/gulp-clean-css.md) ^4.3.0 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.5 - [gulp-load-plugins](https://npm.io/package/gulp-load-plugins.md) ^2.0.1 ## Recent versions - 1.0.2 (latest) — 2021-12-27 - 1.0.1 — 2021-12-26 - 1.0.0 — 2021-12-26 ## README # cong-pages > 使用gulp开发的静态网站工作流 样式支持sass编译、html使用ejs模版、js带babel转义 默认配置 ```javascript const config = { output: { dist: 'dist', dev: 'temp', }, input: { base: 'src', script: "**/*.js", page: "*.html", style: "**/*.{scss, css}", image: '**/*.{png,jpg,gif,ico,svg,eot,ttf,woff}', public: 'public', }, data: { menus: [ { name: 'Home', icon: 'aperture', link: 'index.html' }, { name: 'Features', link: 'features.html' }, { name: 'About', link: 'about.html' }, { name: 'Contact', link: '#', children: [ { name: 'Twitter', link: 'https://twitter.com/w_zce' }, { name: 'About', link: 'https://weibo.com/zceme' }, { name: 'divider' }, { name: 'About', link: 'https://github.com/zce' } ] } ], pkg: require('../package.json'), date: new Date() } } ``` ## 工作命令 ```javascript cong-pages dev cong-pages build cong-pages clean ``` ### cong-pages dev 执行的任务 ```javascript const compile = parallel(style, script, page) const dev = series(clean, compile, server) ``` 首先执行clean任务，清理开发输出文件 ```javascript const del = require("del"); const clean = () => del(Object.values(config.output)) ``` 同时执行style，page，script任务对开发目录下的文件进行编译，并打包到temp目录 ```javascript const script = () => src(config.input.script, srcOptions) .pipe(plugins.babel({ presets: [require('@babel/preset-env')] })) //babel转译es6代码 .pipe(outputDev()) .pipe(bs.reload({ stream: true })) const page = () => src(config.input.page, srcOptions) .pipe(plugins.swig({ data: config.data, defaults: { cache: false } })) //使用模版传入数据 .pipe(outputDev()) .pipe(bs.reload({ stream: true })) const style = () => src(config.input.style, srcOptions) .pipe(sass({ outputStyle: 'expanded' })) // sass编译 .pipe(outputDev()) .pipe(bs.reload({ stream: true })) ``` 最后执行server任务，使用gulp的watch方法监听开发目录下的文件变化，重新编译代码，并且触发服务器更新，最后初始化启动服务器，传入文件路径 ```javascript const server = () => { const options = { cwd: config.input.base, } watch('**/*.*', options, bs.reload()) watch(config.input.style, options, style) watch(config.input.script, options, script) watch(config.input.page, options, page) bs.init({ open: false, server: { baseDir: [config.output.dev, config.input.public, config.input.base], routes: { '/node_modules': 'node_modules' } } }) } ``` ### cong-pages build 执行任务如下 ```javascript const build = series(clean, parallel(series(compile, useref), imagemin, distOther, extra)) ``` clean 、style、page、script和dev相同 useref任务把temp内代码打包压缩合并放入dist中 ```javascript const useref = () => { return src(config.output.dev + '/' + config.input.page, { base: config.output.dev, cwd: config.output.dev, }) .pipe(plugins.useref({ searchPath: [config.output.dev, '.'] })) .pipe(plugins.if(/\.js$/, plugins.uglify())) //压缩js文件 .pipe(plugins.if(/\.css$/, plugins.cleanCss())) //压缩样式文件 .pipe(plugins.if(/\.html$/, plugins.htmlmin({ //压缩html collapseWhitespace: true, minifyCSS: true, minifyJS: true }))) .pipe(outputDist()) } ``` distOther任务把开发目录下剩下的文件复制到dist ```javascript const distOther = () => src(['**/*.*', '!**/*.{js,css,scss,html}', `!${config.input.image}`], srcOptions) .pipe(outputDist()) ``` extra任务把public目录下的文件复制到dist ```javascript const extra = () => src('**/*.*', { base: config.input.public, cwd: config.input.public, }) .pipe(outputDist()) ``` 最后把gulp配置文件放入lib/index.js作为项目入口，在bin/cong-pages.js页面配置执行gulp-cli ```javascript process.argv.push('--cwd') process.argv.push(process.cwd()) //指定执行文件跟路径 process.argv.push('--gulpfile') process.argv.push(require.resolve('..')) //指定gulp配置文件为当前文件入口 require('gulp-cli')() //调用gulp-cli执行配置文件进行构建 ``` ### 发布到npm 最后npm publish发布npm包，然后在本地即可直接使用npm包进行开发 [npm包地址](https://www.npmjs.com/package/cong-pages) ```javascript npm i cong-pages -D ``` 使用yeoman，可得到完整的开发模版 [generator-cong](https://www.npmjs.com/package/generator-cong) ``` npm i yo -g npm i generator-cong -g yo cong ``` --- _Source: https://npm.io/package/cong-pages · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._