gulp 运用案例

var gulp = require('gulp');
var jshint = require('gulp-jshint'); // 引入检测js文件模块
var uglify = require('gulp-uglify'); // 引入js紧缩模块
var concat = require('gulp-concat'); // 引入兼并文件模块
var minhtml = require('gulp-minify-html'); // 引入html紧缩模块
var minify = require('gulp-minify-css'); // 引入紧缩css的模块
var imagemin = require('gulp-imagemin'); // 引入紧缩图片插件
var postcss = require('gulp-postcss'); //JavaScript 代码来转换CSS 中的款式
var autoprefixer = require('autoprefixer'); //自动加上浏览器前缀
var postcsswritesvg = require('postcss-write-svg') // 处置惩罚1px计划

// UI设想稿750px宽，那末100vw = 750px，即1vw = 7.5px
var pxtoviewport = require('postcss-px-to-viewport'); // 代码中写px编译后转化成vm

var browserSync = require('browser-sync')
var opn = require('opn')
//静态服务器

// 1.处置惩罚js文件
gulp.task('js', function () {
    return gulp.src('js/*.js')
        .pipe(jshint()) //检测js
        .pipe(uglify()) //紧缩js
        .pipe(concat('index.js')) //兼并js文件并命名为'index.js'
        .pipe(gulp.dest('build/js')); //将兼并后的js文件输出到build文件夹下      
});

// 2.处置惩罚css
gulp.task('css', function () {
    var processors = [
        pxtoviewport({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 5,
            viewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false
        })
    ];
    return gulp.src('css/*.css') // 指定css文件夹下的一切后缀为.css的文件
        .pipe(postcss([ autoprefixer() ]))  //自动加上浏览器前缀
        .pipe(postcss(processors))
        //.pipe(minify()) //运用minify模块举行css 紧缩
        .pipe(gulp.dest('build/css')) // 最终将紧缩的文件输出到minicss文件下            
})

// 3.紧缩img
gulp.task('img', function () {
    gulp.src('images/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true, //Boolean范例 默许:false 无损紧缩图片
            optimizationLevel: 5, //number范例 默许:3 取值局限:0-7(优化品级)
            interlced: true, //Boolean范例 默许false 隔行扫描gif举行衬着
            multipass: true //Boolean范例 默许false 屡次优化svg直到完整优化
        }))
        .pipe(gulp.dest('build/images')) //输入到build文件夹下的images文件夹下 
})

// 4.紧缩html
gulp.task('html', function () {
    gulp.src('*.html') //指定当前文件夹下的一切html文件
        .pipe(minhtml()) //举行紧缩
        .pipe(gulp.dest('build')) //将紧缩后的文件输出到build文件夹下
        .pipe(browserSync.stream()); //自动翻开浏览器

})

// 定义path
var path = {
    css: './css/*.css',
    js: './js/*.js',
    html: './*.html',
    src: './build'    
};

// 命令行输入gulp或许 gulp default的时刻就会实行
gulp.task('default', function(){
    //把使命串连起来
    gulp.start('js', 'css', 'img', 'html');

    //翻开静态服务器
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = 'http://localhost:3000/';
        opn(homepage);
    });

    //监听文件的变化及时编译 然后革新
    gulp.watch([path.html, path.js, path.css]).on("change", function() {
        gulp.start('js', 'css', 'img', 'html');        
        browserSync.reload();
    });
});

参考文章