目录
前端写html静态页面时,有很多页面的部分代码都是一样的,在没有用到框架的情况下,没有办法从分离提取出来,然后在需要的页面上引入使用,所以就用前端构建工具来处理,百度一下找到了
gulp
的一个插件
gulp-file-include
。
npm
安装gulp
,基本上安装的是最新版本或者新的稳定版本,新版gulp
语法有变化,所以踩了一些坑,记录一下,总结经验
一、初始准备
我这里使用的是npm
,npm
是nodejs
的功能,先检查一下是否安装nodejs
node -v //查看nodejs对应版本号,可以知道是否安装成功
npm -v //查看npm对应的版本号
未安装可以前往nodejs官网(https://nodejs.org/zh-cn/)下载安装一下
npm install --global gulp-cli //全局安装gulp
gulp -v //查看gulp版本
gulp入门指南(https://www.gulpjs.com.cn/docs/getting-started/quick-start/),官方文档里有详细的操作,也可以按文档里面进行。
二、创建项目文件夹
创建一个gulptest
的空文件夹,然后命令行进入到这个文件夹里面。
npm init //初始化项目
使用npm init
后,需要注意这个package name不能为gulp(如下图),然后一直按回车就行。
操作完成之后,gulptest文件夹
下面就会多一个package.json
文件
先安装下一些开发环境下所需的依赖
一、gulp
安装到当前开发环境
-
二、安装npm install --save-dev gulp //gulp安装到当前开发环境
gulp-file-include
gulp-file-include插件和一些语法(https://www.npmjs.com/package/gulp-file-include) -
三、安装npm install --save-dev gulp-file-include
browser-sync
,监听页面变化,实时更新浏览器
Browsersync中文网-快速入门(http://www.browsersync.cn/#install) -
四、安装npm install --save-dev browser-sync
sass和gulp-sass
,这里使用的是scss
(平时都用的是scss)
gulp-sass插件(https://www.npmjs.com/package/gulp-sass) -
npm install sass gulp-sass --save-dev
安装后会多这两个东西,也就是安装到开发环境下的依赖包存放的位置
三、创建src文件夹和gulpfile.js文件
gulpfile.js
,下面是我自己写的配置,就直接贴代码了,
const { src, dest, series, watch } = require('gulp');
const fileinclude = require('gulp-file-include');
// var sass = require('gulp-sass');
const sass = require('gulp-sass')(require('sass'))
const browserSync = require('browser-sync');
// 编译html
function html() {
// 适配src中所有文件夹下的所有html,排除src下的include文件夹中html
return src(['src/**/*.html', '!src/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(dest('dist'));
}
// 编译sass
function sassx() {
// 找到src下的scss和css的两个文件夹,然后将.scss和.css编译输出
return src(['src/scss/*.scss', 'src/scss/*.css', 'src/css/*.scss', 'src/css/*.css'])
// SCSS 插件将 scss、css 文件编译成 CSS 文件
.pipe(sass())
// 输出文件
.pipe(dest('dist/css'));
}
// 提取js、images、font等文件
// 参数name为文件夹名称
function files(name) {
return src('src/' + name + '/**')
.pipe(dest('dist/' + name + ''));
}
function js() {
//src下的js文件夹里的文件直接输出
return src('src/js/**')
.pipe(dest('dist/js'));
}
function images() {
//src下的images文件夹和image文件夹里的文件直接输出到dist/images
return src(['src/image/**', 'src/images/**'])
.pipe(dest('dist/images'));
}
function fonts() {
//src下的font文件夹和fonts文件夹里的文件直接输出到dist/fonts
return src(['src/font/**', 'src/fonts/**'])
.pipe(dest('dist/fonts'));
}
// 配置服务器并监听页面变化
function serve() {
browserSync.init({
server: {
baseDir: 'dist'
},
port: 8000
});
// 监听 html和scss文件变化,调用方法,并更新浏览器
return watch(['src/**/*.html', 'src/scss/*.scss'], series(html, sassx, js, images, fonts)).on('change', browserSync.reload);
}
//导出要执行的方法(命令行直接使用gulp就执行)
exports.default = series(
html,
sassx,
js,
images,
fonts,
serve
);
src文件夹下,写自己的一些代码,这里就随便添加了一些,index.html
里面用到了gulp-file-include
的方法
index.html
include/header.html
include/footer.html
最后在命令行输入gulp
,就执行编译了
gulp
浏览器打开的页面dist
文件夹下的内容和编译后index.html
里的代码,在dist
文件夹里面生成的就是一个常规的html
代码文件
四、最后
最后的目录结构
删除dist
、node_modules
、package-lock.json
这三个内容,就得到一个基础模板,下次要使用时,直接复制一份,然后使用npm install
安装所需依赖即可
package.json
{
"name": "gulptest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.27.5",
"gulp": "^4.0.2",
"gulp-file-include": "^2.3.0",
"gulp-sass": "^5.0.0",
"sass": "^1.41.0"
}
}
gulp中文网(https://www.gulpjs.com.cn/docs/getting-started/quick-start/)
gulp-file-include插件和一些语法(https://www.npmjs.com/package/gulp-file-include)