gulp简单使用

gulp

npm install gulp -g #  gulp 使用3.x 版本
npm install gulp --save-dev

• package.json

{
    "name": "test",
    "version": "1.0.0",
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.7.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-less": "^4.0.1",
        "gulp-livereload": "^4.0.2",
        "gulp-rename": "^2.0.0",
        "gulp-uglify": "^3.0.2",
        "open": "^7.0.4"
    }
}

• gulpfile

var gulp = require("gulp");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var less = require("gulp-less");
var cssClean = require("gulp-clean-css");
var html = require('gulp-htmlmin');
var livereload = require('gulp-livereload');
var connect = require('gulp-connect');
var open = require('open');
// 注册任务
// gulp.task("sss",function ddd () {
//     // 配置任务的操作
//
// })

// 注册合并js任务
gulp.task("js",function () {
    return gulp.src('src/js/*.js')  // 加载文件到内存
        .pipe(concat('build.js'))  // 合并文件
        .pipe(gulp.dest('dist/js/')) // 输出文件到本地
        .pipe(uglify()) // 压缩文件
        .pipe(rename({suffix:'.min'})) // 重命名
        .pipe(gulp.dest('dist/js/'))  // 输出文件到本地
        .pipe(livereload())
        .pipe(connect.reload())
});

// 注册转换less的任务

gulp.task('less',function () {
    return gulp.src('src/less/*.less')
        .pipe(less()) // 编译less
        .pipe(gulp.dest('src/css/'))
        .pipe(livereload())
        .pipe(connect.reload())

});

// 注册css任务
gulp.task("css",['less'],function () {
    return gulp.src('src/css/*.css')
        .pipe(concat("build.css")) // 合并css
        .pipe(rename({suffix:'.min'})) // 压缩后缀
        .pipe(cssClean({compatibility:'ie8'})) // 兼容ie8
        .pipe(gulp.dest("dist/css/"))// 输出css
        .pipe(livereload())
        .pipe(connect.reload())
});

//处理html

gulp.task("html",function () {
    return gulp.src('index.html')
        .pipe(html({collapseWhitespace:true}))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(connect.reload())
});

// watch 任务 半自动
gulp.task('watch',['default'],function () {
    livereload.listen(); // 开启监听
    // 确定监听的目标 以及绑定的任务
    gulp.watch('src/js/*/js',['js']);
    gulp.watch(['src/css/*.css','src/less/*.less'],['css']);
    gulp.watch(['index.html'],['html'])

});

// 全自动
gulp.task('server',['default'],function () {
    // 配置服务器的选项
    connect.server({
        root:'dist/',
        livereload: true,
        port:5000
    });
        // 确定监听的目标 以及绑定的任务
    gulp.watch('src/js/*/js',['js']);
    gulp.watch(['src/css/*.css','src/less/*.less'],['css']);
    gulp.watch(['index.html'],['html']);
    open('http://localhost:5000/')

});

// 注册默认
gulp.task("default",['js','less','css','html']); // 异步

• gulp插件

gulp-concat 合并jscss文件
gulp-uglify  压缩js文件
gulp-rename 文件重命名
gulp-less 编译less
gulp-clean-css 压缩css
gulp-livereload 动态加载文件
gulp-htmlmin 压缩html
gulp-connect 自动刷新页面
open 自动打开浏览器

npm install gulp-concat gulp-uglify gulp-rename gulp-less gulp-clean-css gulp-livereload gulp-htmlmin gulp-connect open --save-dev

• gulp api

gulp.src() // 载入文件到内存 
gulp.dest() // 内存输出到文件
gulp.task() // 创建gulp任务
gulp.watch()// 监听文件变化 执行任务