使用gulp+browser-sync搭建前端项目自动化以及自动刷新

前段时间使用了gulp+browser-sync才发现这个东西真的很好用。

准备工作：（1）、安装nodejs。gulp是基于nodejs使用的，所以先安装nodejs，https://nodejs.org/en/download/在这里直接下载安装就好。

（2）、新建一个项目目录，比如我在E盘中新建一个文件夹：gulpbrowsersync 。在其中新建一些文件夹或者文件比如style文件夹、js文件夹、images文件夹以及index.html,

开始工作：

1、进入项目目录E:\gulpbrowsersync 中，shift+鼠标右键选择在此处打开命令窗口。创建一个模块（在命令行中输入）。

创建过程中会提示输入一些东西，可以直接回车。

npm init       //创建一个模块，会在项目目录中生成一个package.json文件

2、安装gulp（在命令行中输入）。ps:gulp首先需要全局安装一次。

npm install gulp -g
npm install gulp --save -dev

3、安装所需要的几个gulp插件（都是在命令行中输入）

npm install gulp-uglify --save -dev          //js压缩插件

npm install gulp-concat --save -dev          //js合并插件

npm install gulp-cssnano --save -dev         //css压缩插件

npm install gulp-less --save -dev            //less文件编译 

npm install gulp-imagemin --save -dev        //图片压缩插件

npm install gulp-htmlmin --save -dev         //html压缩插件

npm install del --save -dev                  //文件删除模块

4、安装browser-sync（在命令行中输入）

npm install browser-sync  --save -dev

5、在项目根目录中新建gulpfile.js文件（重要！！！文件名为固定不变的。）输入以下内容：

'use strict';

var gulp = require('gulp');                        //获取gulp

var browsersync = require('browser-sync').create();//获取browsersync

//删除dist目录下文件

var del=require('del');

gulp.task('clean',function(cb){

    return del(['dist/*'],cb);

})

//操作js文件

var uglify = require('gulp-uglify');               //js压缩插件

var concat = require('gulp-concat');               //js合并插件

gulp.task('scripts', function() {

    gulp.src('js/*.js')               //需要操作的源文件

        .pipe(uglify())               //压缩js文件

        .pipe(concat('app.js'))       //把js文件合并成app.js文件

        .pipe(gulp.dest('dist/js'))   //把操作好的文件放到dist/js目录下

        .pipe(browsersync.stream());  //文件有更新自动执行

});

//操作css文件

var cssnano = require('gulp-cssnano');    //css压缩插件

var less=require('gulp-less')             //less文件编译

gulp.task('style', function() {

    gulp.src('style/*.css')

        .pipe(less())                     //编译less文件

        .pipe(cssnano())                  //css压缩

        .pipe(gulp.dest('dist/style'))

        .pipe(browsersync.stream());

});

var imagemin = require('gulp-imagemin');    //图片压缩插件

gulp.task('image', function() {

    gulp.src('images/*.{png,jpg,jpeg,gif}')

        .pipe(imagemin())

        .pipe(gulp.dest('dist/images'))

        .pipe(browsersync.stream());

});

var htmlmin = require('gulp-htmlmin');      //html压缩插件

gulp.task('html', function() {

    gulp.src('*.html')

        .pipe(htmlmin({

            collapseWhitespace: true,            //压缩html

            collapseBooleanAttributes: true,     //省略布尔属性的值

            removeComments: true,                //清除html注释

            removeEmptyAttributes: true,         //删除所有空格作为属性值

            removeScriptTypeAttributes: true,    //删除type=text/javascript

            removeStyleLinkTypeAttributes: true, //删除type=text/css

            minifyJS:true,                       //压缩页面js

            minifyCSS:true                       //压缩页面css

        }))

        .pipe(gulp.dest('dist'))

        .pipe(browsersync.stream());

});

gulp.task('serve', ['clean'], function() {

    gulp.start('scripts','style','image','html');

    browsersync.init({

        port: ,

        server: {

            baseDir: ['dist']

        }

    });

    gulp.watch('js/*.js', ['scripts']);         //监控文件变化，自动更新

    gulp.watch('style/*.css', ['style']);

    gulp.watch('images/*.*', ['image']);

    gulp.watch('*.html', ['html']);

});

gulp.task('default',['serve']);

注意1：gulp.src()中为操作文件的源文件，有需要可以自己更改；图片更改中后面的为匹配的图片格式，这里只写了几种常见图片格式，有需要可以自己增加。

注意2：如果不是less文件而只是css文件，可以把style中的 .pipe(less()) 注释掉。

6、在之前的命令窗口中输入

gulp

会出现以下提示

运行完后应该可以自动打开一个浏览器。如果没有打开也没有关系，手动打开浏览器输入上面的local地址（即http://localhost:2016）就可以了。如果是同一个网段的电脑（比如连接同一个wifi的笔记本或者手机），可以输入上面的External地址（即http://192.168.100.110:2016）也可以实现自动更新。

想想这边更新着代码，那边电脑自动更新页面，是不是很炫酷，苦逼前端开发者装逼必备。

最后放一个效果图。嘻嘻

巴特西

使用gulp+browser-sync搭建前端项目自动化以及自动刷新

最新文章

热门文章