zoukankan      html  css  js  c++  java
  • gulp-基本功能总汇

    研究了三天的gulp,今天做一个结束吧。

    本次包含的功能有:

    • html压缩
    • 图片压缩
    • css压缩
    • js检测
    • js压缩
    • 文件合并
    • 文件更名
    • 提示信息
    • 编译less
    • 创建服务器-浏览器实时刷新

    因为我安装的是马云爸爸提供的cnpm所以,我的cmd命令都是cnpm开始的。

    cnpm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify gulp-less gulp-connect --save-dev

    //初始化工具
    var gulp = require('gulp');
    var htmlmin = require('gulp-htmlmin'), //html压缩
        imagemin = require('gulp-imagemin'),//图片压缩
        pngcrush = require('imagemin-pngcrush'),
        minifycss = require('gulp-minify-css'),//css压缩
        jshint = require('gulp-jshint'),//js检测
        uglify = require('gulp-uglify'),//js压缩
        concat = require('gulp-concat'),//文件合并
        rename = require('gulp-rename'),//文件更名
        notify = require('gulp-notify'),//提示信息
        less =require('gulp-less'),     //编译less
        connect=require('gulp-connect');//创建服务器-浏览器实时刷新
    

      

    //部署各种任务
    // 压缩html
    gulp.task('html', function() {
        return gulp.src('src/*.html')
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(gulp.dest('./dest'))
            .pipe(notify({ message: 'html task ok' }));
    });
    // 压缩图片
    gulp.task('img', function() {
        return gulp.src('src/images/*')
            .pipe(imagemin({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                use: [pngcrush()]
            }))
            .pipe(gulp.dest('./dest/images/'))
            .pipe(notify({ message: 'img task ok' }));
    });
    // 合并、压缩、重命名css
    gulp.task('css', function() {
        return gulp.src('src/css/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dest/css'))
            .pipe(rename({ suffix: '.min' }))
            .pipe(minifycss())
            .pipe(gulp.dest('dest/css'))
            .pipe(notify({ message: 'css task ok' }));
    });
    // 检查js
    gulp.task('lint', function() {
        return gulp.src('src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(notify({ message: 'lint task ok' }));
    });
    // 合并、压缩js文件
    gulp.task('js', function() {
        return gulp.src('src/js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('dest/js'))
            .pipe(rename({ suffix: '.min' }))
            .pipe(uglify())
            .pipe(gulp.dest('dest/js'))
            .pipe(notify({ message: 'js task ok' }));
    });
    //编译less
    gulp.task('less',function () {
        return gulp.src('src/less/*.less')
            .pipe(less())
            .pipe(gulp.dest('src/css'))
            .pipe(notify({message:'less task ok'}));
    });
    //浏览器实时刷新
    gulp.task('serve',function () {
        //创建一个服务器,端口默认是8080
        connect.server({
            //root:根目录
            root:'dest',
            livereload:true
        });
        gulp.watch('dest/**/*.*',['reload']);
    });
    //部署动作命令-reload
    gulp.task('reload',function () {
        gulp.src('dest/**/*.*')
            .pipe(connect.reload());
    });
    

      

    //运行命令:gulp default
    // 默认任务
    gulp.task('default',['img','css','lint','js','html','less','serve'],function(){
       // gulp.run('img','css','lint','js','html','less','serve');
      //gulp.run已经被废弃
        // 监听html文件变化
        gulp.watch('src/*.html',['html']);
    
        // Watch .css files
        gulp.watch('src/css/*.css',['css']);
    
        // Watch .js files
        gulp.watch('src/js/*.js',['lint','js']);
    
        // Watch image files
        gulp.watch('src/images/*', ['img']);
    
        //watch less files
        gulp.watch('src/less/*.less',['less']);
    
    });
    

      cmd命令窗口可以直接执行default命令运行,如果你是用的webstorm编辑器可以直接运行哦;;

  • 相关阅读:
    macbook 无声音解决方案
    webapck dev server代理请求 json截断问题
    百度卫星地图开启
    服务器 nginx配置 防止其他域名绑定自己的服务器
    记一次nginx php配置的心路历程
    遇到npm报错read ECONNRESET怎么办
    运行svn tortoiseSvn cleanup 命令失败的解决办法
    svn add 命令 递归目录下所有文件
    m4出现Please port gnulib freadahead.c to your platform! Look at the definition of fflush, fread, ungetc on your system, then report this to bug-gnulib."
    Ubuntu下安装GCC,mpc、mpfr、gmp
  • 原文地址:https://www.cnblogs.com/webSong/p/6386309.html
Copyright © 2011-2022 走看看