gulp前端静态页面工程化

1. 安装gulp以及gulp-file-include
npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install gulp --save-dev
npm install gulp-file-include

2. 将node_modules目录下gulp-file-include目录的文件复制到 新项目处.

3. 在新项目处新建gulpfile.js

var gulp = require('gulp');
var fileinclude  = require('gulp-file-include');

gulp.task('fileinclude', function() {
    gulp.src('src/**.html')
        .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
    .pipe(gulp.dest('dist'));
});

4. 文件目录

|-node_modules
|-src // 生产环境的 html 存放文件夹
    |-include // 公共部分的 html 存放文件夹
    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js

5. 文件目录处cmd 敲 gulp fileinclude