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编辑器可以直接运行哦；；

 

 

 

转载于:https://www.cnblogs.com/webSong/p/6386309.html