利用gulpfile真机调试

最新推荐文章于 2024-05-30 09:45:09 发布

chenjieone

最新推荐文章于 2024-05-30 09:45:09 发布

阅读量1.1k

点赞数

分类专栏： jq 文章标签： web真机调试

本文链接：https://blog.csdn.net/chenjieone/article/details/54911209

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在项目下新建一个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"//引号内的为调试内容的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"
  }
}