本文主要給大家總結(jié)了在工作中可能會(huì)用到的小工具,在此記錄一下。
可以實(shí)現(xiàn)的功能有:
1. 本地http服務(wù)器
2.頁(yè)面實(shí)時(shí)刷新
3.可以模擬ajax請(qǐng)求
第一步,新建package.json文件。
用到了gulp、gulp-webserver、gulp-livereload
package.json的內(nèi)容如下:
{ "name": "localserver", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-webserver": "^0.9.1", "gulp-livereload": "^3.8.1" }}第二步,在當(dāng)前目錄下執(zhí)行npm install安裝所需的包
第三步,建立目錄結(jié)構(gòu)

其中,www是站點(diǎn)的根目錄,用于放置html/js/css等靜態(tài)文件,api是用于放置模擬ajax請(qǐng)求的js文件,如test.js。則ajax請(qǐng)求/api/test的時(shí)候,返回改文件的內(nèi)容,是一個(gè)json對(duì)象。
第四步,編寫gulpfile.js
gulpfile.js內(nèi)容如下:
var url = require('url');var fs = require('fs');var path = require('path');gulp = require('gulp');livereload = require('gulp-livereload');webserver = require('gulp-webserver');//web服務(wù)器gulp.task('webserver', function() { gulp.src('./www') // 服務(wù)器目錄(./代表根目錄) .pipe(webserver({ // 運(yùn)行g(shù)ulp-webserver port: 8000, //端口,默認(rèn)8000 livereload: true, // 啟用LiveReload open: true, // 服務(wù)器啟動(dòng)時(shí)自動(dòng)打開網(wǎng)頁(yè) directoryListing: { enable: true, path: './www' }, middleware: function(req, res, next) { //mock local data var urlObj = url.parse(req.url, true), method = req.method; if (!urlObj.pathname.match(/^//api/)) { //不是api開頭的數(shù)據(jù),直接next next(); return; } var mockDataFile = path.join(__dirname, urlObj.pathname) + ".js"; //file exist or not fs.access(mockDataFile, fs.F_OK, function(err) { if (err) { res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ "status": "沒(méi)有找到此文件", "notFound": mockDataFile })); return; } var data = fs.readFileSync(mockDataFile, 'utf-8'); res.setHeader('Content-Type', 'application/json'); res.end(data); }); next(); }, proxies: [] }));});// 默認(rèn)任務(wù)gulp.task('default', ['webserver']);第五步,執(zhí)行g(shù)ulp命令,會(huì)自動(dòng)打開瀏覽器,在8000端口起了http服務(wù)。就可以看到你的頁(yè)面了。
為了給大家使用方便,我把建立好的目錄和文件放在這里了,你下載后,直接運(yùn)行npm install,然后gulp就可以了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注