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

最新推荐文章于 2022-01-18 23:49:09 发布

天地无边

最新推荐文章于 2022-01-18 23:49:09 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/u011848751/article/details/78741646

版权

首先安装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.js
var 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里面配置的任务。