前端服务器本地搭建分三阶段:
1、Node.js的安装
2、Npm环境配置
3、编写JS文件
1、Node.js安装:
如图所示:
Next:
选择I accept 然后Next:
选择安装文件的位置,然后Next:
Next:
选择Install:
等待安装:
Node.js 安装完成,选择Finish;接下来安装服务需要NPM。
2、Npm环境配置:
node -v 回车。查看Node版本号,如下,若存在则安装正常;不存在版本号则需要添加环境变量或者重新安装。
确定Node安装正常后,开始安装NPM各种依赖,下面依次执行命令:
npm install gulp del -g
安装完成如图所示(后面执行的命令完成后类似)
npm install gulp-uglify -g
npm install gulp-minify-css -g
npm install gulp-concat -g
npm install browser-sync -g
npm install run-sequence -g
以上命令全部执行完成后,在要存储源代码的目录下(若没有可以新建一个),执行以下命令:
比如要在F盘下的dist目录下存放源代码,则可以DOS命令一步步转到该目录下,或者找到该文件路径后直接在路径行输入CMD即可,如图:
//下面命令写在具体的文件内,如上图内的路径中
npm install gulp del --save-dev
npm install gulp-uglify --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-concat --save-dev
npm install browser-sync --save-dev
npm install run-sequence --save-dev
以上命令执行完成后会在D盘下的src文件夹内生成如下图所示的文件结构:
3、编写JS文件
在node_modules文件夹的同级目录内新建 服务运行所需的JS文件。
将下列代码复制到 该JS文件
var gulp, runSequence,browserSync;
gulp = require('gulp'); //加载gulp服务
runSequence = require('run-sequence'); //加载run-sequence服务
browserSync = require('browser-sync').create();
gulp.task('serve', function() { //编写服务功能
return browserSync.init({
server: { //本地服务器启动配置
baseDir: './src/' //启动服务时执行代码路径
},
port: 8000, //启动服务端口
});
});
gulp.task('watch', function() { //编写监听服务
return gulp.watch('./src/**/*.*', ['reload']);
});
gulp.task('reload', function(callback) {
return runSequence(['reload-browser'], callback);
});
gulp.task('reload-browser', function() {
return browserSync.reload();
});
gulp.task('default', function(callback) { //执行JS文件时服务执行顺序
return runSequence(['serve', 'watch'], callback);
});
该JS文件编写完成后,在DOS命令行,执行 gulp命令就行;或者不想这么麻烦的,可以编写一个.bat文件(新建一个txt文件,写入 gulp serve watch;然后将该txt文件的后缀名改成bat即可),点击即可执行。
执行启动如下:
此时一个前端的本地服务器就搭建和启动完毕,启动后的WEB服务将在默认浏览器上显示
ps:另一份gulpfile.js备份
var gulp = require("gulp"),
browserSync = require('browser-sync').create(),
runSequence = require('run-sequence'),
reload = browserSync.reload,
childProcess = require('child_process'),
electron = require('electron');
/*启动项目*/
gulp.task('serve', function() {
return browserSync.init({
server: {
baseDir: './src/'
},
port: 8611
});
});
//监听文件
gulp.task('watch', function() {
return gulp.watch('./src/**/*.*').on("change",reload);
});
//刷新浏览器
gulp.task('reload', function(callback) {
return runSequence(['reload-browser'], callback);
});
//刷新浏览器
gulp.task('reload-browser', function() {
browserSync.reload();
});
//默认执行
gulp.task('default', function(callback) {
return runSequence(['serve', 'watch'], callback);
});
gulp.task('run', function () {
childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'});
});
根据提示。如果本地服务启动时缺少某个模块,则通过npm install XXXX --save-dev 进行安装。