gulp生成html静态网页模板

1、npm init

2、package.json

{
  "name": "aucruxs",
  "version": "0.0.1",
  "description": "build-htmls",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp build"
  },
  "author": "43235817@qq.com",
  "license": "ISC",
  "devDependencies": {
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-connect": "^5.7.0",
    "gulp-file-include": "^2.3.0",
    "gulp-stylus": "^2.7.0"
  },
  "dependencies": {}
}

3、npm install

4、gulifile.js

const fileinclude = require('gulp-file-include');
const gulp = require('gulp');
const stylus = require('gulp-stylus');
const del = require('del');
const connect = require("gulp-connect");
const cleanCSS = require('gulp-clean-css');

const paths = {
  htmls:{
    src: 'src/pages/*.html',
    dest:'dist'
  },
  styles:{
    src: 'src/stylus/*.styl',
    dest:'dist/skin/css'
  },
  scripts:{
    src: 'src/js/*.js',
    dest:'dist/skin/js'
  }
}

function server(){
  return connect.server({
    root:'./dist',
    livereload:true,
    port:8081
  });
}

function htmls(){
  return gulp.src(paths.htmls.src)
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest(paths.htmls.dest))
    .pipe(connect.reload());
}

function styles() {
  return gulp.src(paths.styles.src)
    .pipe(stylus({
      compress: true
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(connect.reload());
}

function clean(){
  return del(['dist']);
}


function watch() {
  gulp.watch(['./src/pages/*.html','./src/include/*.html'], gulp.parallel(htmls));  
  gulp.watch(paths.styles.src, gulp.parallel(styles));
}

var build = gulp.series(clean, gulp.parallel(htmls,styles,server,watch));

exports.clean = clean;
exports.server = server;
exports.styles = styles;
exports.watch = watch;
exports.build = build;

exports.default = build

5、基本目录结构

projectdir
     src
         pages
         include
         stylus
             reset.styl
             common.styl
         ..........
     package.json
     gulpfile.sj

6、npm run start

---