利用gulpfile真機調試

2024-04-27 15:11:27

字體：大中小

來源：轉載

供稿：網友

在項目下新建一個gulpfile.js的文件和package.json的文件 gulpfile.js的內容為

var gulp = require('gulp');var browserSync = require('browser-sync'); // 自動刷新var plumber = require('gulp-plumber'); // gulp 錯誤處理// CSS相關var postcss = require('gulp-postcss');var PRecss = require('precss');var autoprefixer = require('autoprefixer');var extend = require('postcss-simple-extend');var mixins = require('postcss-sassy-mixins');var comment = require('postcss-inline-comment');var scss = require('postcss-scss');var stripInlineComments = require('postcss-strip-inline-comments');var rename = require('gulp-rename'); // 文件重命名gulp.task('browserSync', function () { browserSync.init({ port: 2333,//端口號可以自定義 server: { baseDir: './', index: "./html/submit.html"http://引號內的為調試內容的html } }); browserSync.watch('./css/*.css').on('change', browserSync.reload); browserSync.watch('./js/*.js').on('change', browserSync.reload); browserSync.watch('./*.html').on('change', browserSync.reload)});gulp.task('scss', function () { var postCssPlugins = [ precss, autoprefixer({ browsers: ['> 1%', 'IE > 8', 'Android >= 1.6', 'iOS >= 1.0'] }), stripInlineComments ]; function buildCss() { gulp.src('./scss/style.scss') .pipe(plumber()) .pipe(postcss(postCssPlugins, {syntax: scss})) .pipe(rename(function (path) { path.extname = '.css'; })) .pipe(gulp.dest('./css')); } buildCss(); gulp.watch('./scss/*.scss', function () { buildCss(); })});gulp.task('default', ['browserSync', 'scss']);

package.json的內容為：

{ "name": "cofco", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "gulp" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^6.5.3", "browser-sync": "^2.18.2", "gulp": "^3.9.1", "gulp-plumber": "^1.1.0", "gulp-postcss": "^6.2.0", "gulp-rename": "^1.2.2", "postcss-inline-comment": "^3.0.0", "postcss-sassy-mixins": "^2.0.0", "postcss-scss": "^0.4.0", "postcss-simple-extend": "^1.0.0", "postcss-strip-inline-comments": "^0.1.5", "precss": "^1.4.0" }}

在cmd中輸入 npm install npm run dev 在手機瀏覽器中輸入External后面的地址就可以進行真機調試了這里寫圖片描述