使用gulp自动化监控并开启本地服务器功能。

来源：互联网发布：受力分析软件编辑：程序博客网时间：2024/06/02 01:45

首先安装gulp包（npm install gulp -g --save-dev）,安装并配置全局安装。

所需其他依赖依次安装：

    "bower": "^1.8.2",                                        "browser-sync": "^2.18.13",                               "gulp": "^3.9.1",                                         "gulp-less": "^3.3.2",                                    "gulp-watch": "^4.3.11"

我的项目配置文件package.json

cat package.json                                        {                                                           "name": "buhuoboot4",                                     "version": "1.0.0",                                       "description": "",                                        "main": "index.js",                                       "scripts": {                                                "test": "echo \"Error: no test specified\" && exit 1"   },                                                        "author": " ",                                       "license": "ISC",                                         "devDependencies": {                                        "bower": "^1.8.2",                                        "browser-sync": "^2.18.13",                               "gulp": "^3.9.1",                                         "gulp-less": "^3.3.2",                                    "gulp-watch": "^4.3.11"                                 },                                                        "dependencies": {}                                      }

在项目目录新建并配置gulpfile.js文件实现当前目录输入gulp自动化启动功能。

λ cat gulpfile.jsvar gulp = require('gulp'),browserSync = require('browser-sync').create();var less = require('gulp-less');gulp.task('testLess', function () {            gulp.src('bootstrap/scss/_variables.scss')                .pipe(less())                .pipe(gulp.dest('bootstrap/dist/css/bootstrap.css'))     });gulp.task('teststrat', function () {        browserSync.init({          server:{            baseDir:'./'          },                files:['index.html','bootstrap/dist/css/bootstrap.css']        });});gulp.task('default',['testLess']);gulp.task('default',['teststrat']);

执行两个任务，监控scss文件变化执行自动编译，监控指定文件变化自动更新到浏览器。

最后命令行直接输入gulp，自动化执行gulpfile.js里面配置的任务。

阅读全文

0 0