zoukankan      html  css  js  c++  java
  • gulpfile.js配置 实现ctrl+s自动编译和刷新浏览器

    var gulp = require("gulp"); //引进gulp模块
    var uglify = require("gulp-uglify"); //js压缩
    var minifyCss = require("gulp-minify-css"); //css压缩
    var minifyHtml = require('gulp-minify-html'); //html压缩
    var imagemin = require('gulp-imagemin'); //图片压缩
    var sass = require('gulp-sass-china'); //sass编译
    var livereload = require('gulp-livereload'); //刷新


    //js压缩
    gulp.task('minijs', function() {
    gulp.src('src/js/*.js') //要压缩的js文件
    .pipe(uglify()) //用uglify压缩
    //.pipe(rename('yasuo.min.js')) //js重命名
    .pipe(gulp.dest('dist/js')); //压缩后路径
    })

    //css压缩
    gulp.task('minicss', function() {
    gulp.src('src/css/*.css') //要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css')); //压缩后的路径
    })

    //html压缩
    gulp.task('minihtml', function() {
    gulp.src('src/*.html') //要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist')); //压缩后的路径
    })

    //图片压缩
    gulp.task('miniimg', function() {
    gulp.src('src/img/*.{jpg,png,gif,ico}') //要压缩的图片文件
    .pipe(imagemin()) //压缩图片
    .pipe(gulp.dest('dist/img')) //压缩后保存的路径
    })

    //sass编译
    gulp.task('sass',function(){
    gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
    .pipe(livereload());
    })
    //监听.scss
    gulp.task('watch',function(){
    livereload.listen();//要在这里调用listen()方法
    gulp.watch('src/sass/*.scss',['sass'])
    })


    //用gulp实现编译
    gulp.task('default',['sass','watch']);


    //gulp compress 实现img/js/css/的压缩
    gulp.task('compress',['minijs','minicss','miniimg']);

  • 相关阅读:
    Java之路---Day09(继承)
    Java之路---Day08
    Java之路---Day07
    Java之路---Day06
    转载:js 创建对象、属性、方法
    Javascript类型检测
    jQuery 如何写插件
    js浮点数精度问题
    IE7.JS解决IE兼容性问题方法
    CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑
  • 原文地址:https://www.cnblogs.com/jddk/p/8405368.html
Copyright © 2011-2022 走看看