gulp启本地服务（node启本地服务）

最新推荐文章于 2024-08-28 03:48:03 发布

u013063153

最新推荐文章于 2024-08-28 03:48:03 发布

阅读量8.1k

点赞数

分类专栏：前端部署Gulp

本文链接：https://blog.csdn.net/u013063153/article/details/52859069

版权

前端部署Gulp 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用gulp作为前端自动化工具来启动本地服务器，便于开发和测试。通过配置gulpfile.js，创建package.json，安装gulp-connect插件，然后运行gulp命令，可以启动一个带有实时重载功能的服务器。此外，还分享了如何通过手机连接同一WiFi，通过电脑的IPv4地址访问本地服务器，实现在手机上预览和测试网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：gulp 是一个非常有用的 web前端自动化开发工具，可以通过配置 gulp task 帮助我们完成许多工作。不仅如此，我们还可以利用 gulp 来建一个简单的服务器，供我们测试用。下面来看看如何配置：

1. 首先，创建package.json文件（包依赖）

npm init

接着会出现如下，提示（如果不填任何东西，直接按回车直到出现 yes 确认就行，以后也可以修改这个文件）

2.安装gulp

npm i -D gulp

npm i -D gulp-connect

// i -D 等同于 --save-dev

3.新建gulpfile.js文件，并编辑（复制下面内容））

var gulp = require('gulp');

var connect = require('gulp-connect');

gulp.tack('webserver',function(){

connect.server({

livereload:true,

port:2333

});

gulp.tack('default',['webserver']);

4. 在命令行输入gulp，接着可以用浏览器访问localhost:2333，此时文件结构如下：

5.通过手机访问

1）首先电脑开WiFi，手机连上电脑的WiFi

2）打开命令行（Win+R，输入cmd ）

3）输入命令 ipconfig

4）记住 ipv4 地址（假如是 192.110.16.1），在手机浏览器输入 192.110.16.1:2333

5)点开 demo.html 就可以在手机测试你写的网页了

其他

通常还会用 gulp 执行其他任务，比如编译 sass，less，压缩 js 文件等

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('webserver',function() {
    connect.server({
        livereload:true,
        port: 2333
    });
});

gulp.task('script',function() {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('sass',function() {
    return sass('sass/*.scss')
        .on('error',function(err) {
            console.error('sassError!', err.message);
        })
        .pipe(gulp.dest('dist/css'));
});

gulp.task('auto',function() {
    gulp.watch('js/*.js', ['script']);
    gulp.watch('sass/**/*.scss', ['sass']);
});

gulp.task('default', ['webserver','sass','script','auto']);