当前位置: 首页>前端>正文

前端项目本地能运行但打不开 Out of Memory 前端本地服务器

前端服务器本地搭建分三阶段:

1、Node.js的安装

2Npm环境配置

3编写JS文件

 

1、Node.js安装:

  如图所示:

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp,第1张

  Next:

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_操作系统_02,第2张

  选择I accept 然后Next:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_前端_03,第3张

  选择安装文件的位置,然后Next:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_操作系统_04,第4张

  Next:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_05,第5张

  选择Install:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_前端_06,第6张

  等待安装:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_07,第7张

  Node.js 安装完成,选择Finish;接下来安装服务需要NPM。

 

2、Npm环境配置:

node -v 回车。查看Node版本号,如下,若存在则安装正常;不存在版本号则需要添加环境变量或者重新安装。

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_08,第8张

  确定Node安装正常后,开始安装NPM各种依赖,下面依次执行命令:

npm install gulp del -g

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_ViewUI_09,第9张

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_10,第10张

  安装完成如图所示(后面执行的命令完成后类似)

npm install gulp-uglify -g

    

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_javascript_11,第11张

npm install gulp-minify-css -g

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_javascript_12,第12张

npm install gulp-concat -g

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_ViewUI_13,第13张

npm install browser-sync -g

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_前端_14,第14张

npm install run-sequence -g

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_ViewUI_15,第15张

  以上命令全部执行完成后,在要存储源代码的目录下(若没有可以新建一个),执行以下命令:

  比如要在F盘下的dist目录下存放源代码,则可以DOS命令一步步转到该目录下,或者找到该文件路径后直接在路径行输入CMD即可,如图:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_16,第16张

  //下面命令写在具体的文件内,如上图内的路径中

npm install gulp del --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_ViewUI_17,第17张

npm install gulp-uglify --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_操作系统_18,第18张

npm install gulp-minify-css --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_前端_19,第19张

npm install gulp-concat --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_操作系统_20,第20张

npm install browser-sync --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_操作系统_21,第21张

npm install run-sequence --save-dev

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_javascript_22,第22张

  以上命令执行完成后会在D盘下的src文件夹内生成如下图所示的文件结构:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_前端_23,第23张

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_gulp_24,第24张

 

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即可),点击即可执行。

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_javascript_25,第25张

  执行启动如下:

     

前端项目本地能运行但打不开 Out of Memory 前端本地服务器,前端项目本地能运行但打不开 Out of Memory 前端本地服务器_javascript_26,第26张

  此时一个前端的本地服务器就搭建和启动完毕,启动后的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 进行安装。



https://www.xamrdz.com/web/2ka1934875.html

相关文章: