gulp+browsersync前端自动化构建和页面自动同步

 阅读约 6 分钟

  学习gulp+browsersync进行前端自动化构建和测试,才发现对于前端开发人员是在太方便了,记录下我的学习成果,自己动手搭建一个前端自动化构建框架。

介绍

gulp

  Gulp是一款基于node.js、流的前端自动化构建工具,可以自动化的帮我们完成前端开发中大量的重复工作,例如:预处理语言的编译,html、css、js文件的压缩混淆,图片尺寸优化等。使得我们能将工作的中心放在开发上,而不是这些重复繁琐的工作。

browsersync

  BrowserSync是一款浏览器同步测试工具,让浏览器实时响应htmljscsssassless等文件的更改,而不需要手动刷新页面。并且它可以同时在PC、平板、手机等设备下进项调试,只要手机平板连上pc的的wifi。使得前端开发测试便捷高效。

安装

  1. 由于gulp是基于node.js的,所以安装前应该安装node.js以及它的npm包管理工具。
  2. 利用npm安装gulp模块:全局安装:npm install gulp -g
  3. 安装browsersyncnpm install browsersync

自动化构建流程

  1. 新建一个项目目录
  2. 在这个项目根目录下输入命令:npm init,创建项目的配置文件package.json
  3. 添加gulp的项目依赖:npm install gulp --sava-dev,(ps:gulp首先得全局安装)
  4. 安装browsersync:npm install browser-sync --save-dev
  5. 在项目根目录下创建:gulpfile.js文件
  6. gulpfile.js中编写项目需要自动化完成的任务。
  7. gulp核心:gulpfile.js中完成的任务包括:

    • 1.LESS编译 压缩 合并
    • 2.JS合并 压缩 混淆
    • 3.img复制
    • 4.html压缩
  8. 在命令窗口输入:gulp serve

gulpfile.js的主要作用就是对开发时候的文件夹scr里的文件进行处理(编译、压缩、混淆、合并等),将其输出到生产时候的文件夹dist。开发与部署文件相分离。

var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');

// 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包
gulp.task('style', function() {
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
//这里第二个参数是排除_*.less(被其他less文件导入的less文件)
    .pipe(less())//编译成css文件
    .pipe(cssnano())//压缩
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({//通知浏览器重新加载
      stream: true
    }));
});

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 2. JS合并 压缩混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))//合并为all.js文件
    .pipe(uglify())//压缩混淆
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// 3. 图片复制
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,//空白缩进
      removeComments: true//删除评论
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {//开启一个静态文件服务器,默认:3000端口
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });
  //监听源文件的变化
  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});

自动化构建项目框架--github地址

https://github.com/candyCCat/...

阅读 894更新于 2018-07-31
推荐阅读
目录