前言:gulp 是一个很是有用的 web前端自动化开发 工具,能够经过配置 gulp task 帮助咱们完成许多工做。不只如此,咱们还能够利用 gulp 来建一个简单的服务器,供咱们测试用。下面来看看如何配置:css
1. 首先,建立package.json文件(包依赖)html
npm init
接着会出现以下,提示(若是不填任何东西,直接按回车直到出现 yes 确认就行,之后也能够修改这个文件)前端
2.安装gulpnode
npm i -D gulpnpm i -D gulp-connectweb
// i -D 等同于 --save-devnpm
3.新建gulpfile.js文件,并编辑(复制下面内容))json
var gulp = require('gulp');gulp
var connect = require('gulp-connect');浏览器
gulp.tack('webserver',function(){sass
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']);
--------------------------我是分割线(用ndoejs启本地服务)----------------------