gulp监听页面及压缩

文件目录

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "This is for study gulp project !",
  "homepage": "",
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-jshint": "^2.1.0",
    "gulp-less": "^3.5.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.3.0",
    "gulp-uglify": "^3.0.0"
  }
}

gulpfile.js

var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    del = require('del'),
    connect = require('gulp-connect'),
    livereload = require('gulp-livereload');

gulp.task('minify_css',["clean"], function () {
    var cssSrc = ['src/styles/*.css'];

    return gulp.src(cssSrc)      //压缩的文件
        .pipe(concat('all.css'))    //合并所有css到all.css
        .pipe(gulp.dest('gulp/css'))   //输出文件夹
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('gulp/css')); //执行压缩
});

//压缩js
gulp.task('minify_js',["clean"], function() {
    var jsSrc = ['src/scripts/*.js','!src/scripts/*.src.js'];

    return gulp.src(jsSrc)
        .pipe(concat('all.js'))    //合并所有js到all.js
        .pipe(gulp.dest('gulp/js'))    //输出all.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('gulp/js'));  //输出
});


//执行压缩前，先删除以前压缩的文件
gulp.task('clean', function() {
    return del(['gulp/css/all.css', 'gulp/css/all.min.css', 'gulp/js/all.js', 'gulp/js/all.min.js'])
});

// 压缩任务(gulp)
gulp.task('default', function(){
    gulp.run('minify_css', 'minify_js');
});

//定义html任务
gulp.task('html', function() {
    gulp.src('src/*.html')
        .pipe(livereload());
});
//定义css任务
gulp.task('css', function() {
    gulp.src('src/styles/*.css')
        .pipe(livereload());
});
// 定义js任务
gulp.task('js', function() {
    gulp.src('src/scripts/*.js')
        .pipe(livereload());
});
// 定义img任务
gulp.task('img', function() {
    gulp.src('src/images/*.jpg')
        .pipe(livereload());
});

// 定义监听任务(gulp watch)

gulp.task('watch', function() {
    livereload.listen();
    // gulp.watch('src/styles/*.css', ['css']);
    gulp.watch('src/*.html', ['html']);
    gulp.watch('src/styles/*.css', ['css']);
    gulp.watch('src/scripts/*.js', ['js']);
    gulp.watch('src/images/*.jpg', ['img']);
});

主要是理解原理，具体逻辑还是要自己写的

google监听的话，要下个插件LiveReload，打开页面点击插件即可