项目中使用gulp,不再手动使用F5刷新浏览器

接到新的项目后,首先我们要根据psd还原设计师的劳动成果,如果用了css预处理器less或者sass,koala编译,然后手动刷新浏览器来查看效果...不仅费时,而且费力,导致开发效率低下......

那么有没有什么能帮助我们解放'双手'呢? 当然有啦,那就是gulp
关于gulp的介绍以及详细的用法可以参照 https://www.gulpjs.com.cn/

1.在项目根目录下 运行 npm init 会创建一个package.json

• package.json里会记录你项目所用的依赖

2.在package.json的同级(也就是项目的根目录下)手动创建一个gulpfile.js文件

• 名字必须为 gulpfile

3.全局/局部 安装gulp

• --全局安装 npm install gulp -g 或者 cnpm install gulp -g
• --局部安装 npm install gulp --save-dev 或者cnpm install gulp --save-dev
• 如果通过npm指令安装gulp失败,可以换成淘宝镜像cnpm来安装

4.分别安装如下代码中项目所需要的依赖

5.chrome应用商店安装liveReload插件

• 安装成功会有如图所示的小图标

  
  image.png

6.在gulpfile.js里面引入gulp

贴一下我的配置

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

    // 获取 less 模块（用于编译 less）
    less = require('gulp-less'),

    // 获取 uglify 模块（用于压缩 JS）
    uglify = require('gulp-uglify'),

    // 获取 css 模块（用于压缩 css）
    cssUglify = require('gulp-minify-css'),

    // 获取 imagemin 模块（用于压缩 img）
    imageMin = require('gulp-imagemin'),
    livereload = require('gulp-livereload'),
    connect = require('gulp-connect'); //首先需要在gukpfile.js中require这个插件，不要忘记了在项目中npm install

// 由于index页面在最外层 所以单独自动刷新
gulp.task('index', function () {
    gulp.src('index.html')
        .pipe(connect.reload())     //服务器同步
})

// page下面所有的html页面 刷新
gulp.task('html', function () {
    gulp.src('page/**')
        .pipe(connect.reload())     //服务器同步
})

// 编译less  
gulp.task('less', function () {
    gulp.src('less/**')
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload())     //服务器同步
})

// 压缩 css 文件
gulp.task('css', function () {
    gulp.src('css/**')
        .pipe(cssUglify())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())     //服务器同步
})

// 压缩 js 文件
gulp.task('js', function () {
    // 1. 找到文件
    gulp.src('js/**')
        // 2. 压缩文件
        .pipe(uglify({
            mangle: false
        }))
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload())     //服务器同步
})

// 压缩img
gulp.task('images', function () {
    gulp.src('images/**')
        .pipe(imageMin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/images'))
        .pipe(connect.reload())     //服务器同步
})

// 监听文件修改，当文件修改则执行less任务
gulp.task('watch', function () {
    gulp.watch('less/**', ['less']);
    gulp.watch('css/**', ['css']);
    gulp.watch('js/**', ['js']);
    gulp.watch('index.html', ['index']);
    gulp.watch('page/**', ['html']);
})

//定义livereload任务
gulp.task('connect', function () {
    connect.server({
        port: '8888',        //定义端口号
        livereload: true
    });
});

gulp.task('default', ['less', 'css', 'js', 'images', 'watch', 'connect'])

这里我分别定义html less css js images等多个任务,最后这些任务都添加到default任务中,我们只需要运行gulp就可以执行所有任务

image.png

修改html,css,js等代码,liveReload会推送到界面,并执行自动刷新
然后在地址栏里输入localhost:8888,体验gulp之旅