gulp的点点滴滴

去年用gulp，但一直没有写篇博客，今天有时间无聊写一篇。。。。

什么是gulp？gulp的官网title上对这个工具有一个比较准确的定义，叫做：基于流的自动化构建工具。如果你查看它的网页源代码，还会看到在<meta>标签里有一段更详细的描述：gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

好了废话不多说，直接上代码，下面是我写的gulpfile,里面的一些模块不懂的可以去 => https://www.npmjs.com/ 搜索看使用方法，俗话说看源码是最快的学习途径。。。

'use strict';
{
    let gulp = require(`gulp`);

    let path = require(`./config.json`);

    let minifycss = require(`gulp-minify-css`);

    let postcss = require(`gulp-postcss`);    

    let cssgrace  = require(`cssgrace`);    

    let cssnext  = require(`postcss-cssnext`);                    

    let jshint = require(`gulp-jshint`);           

    let uglify = require(`gulp-uglify`);                

    let fontmin = require(`gulp-fontmin`);

    let imagesmin = require(`gulp-imagemin`);  

    let pngquant = require(`imagemin-pngquant`);                     

    let through = require(`through2`);    

    let html = require(`html-minifier`).minify;

    let cheerio = require(`cheerio`);

    let clean = require(`gulp-clean`);

    let rename = require(`gulp-rename`);

    let browserSync = require(`browser-sync`);

    let reload = browserSync.reload; 

    let processors = [
        cssnext(),
        cssgrace
    ];

    gulp.task(`browser-sync`, () => {
        return browserSync({
            port:8080,
            open:true,
            server: {
                baseDir: `./build`
            }
        });
    });

    gulp.task(`css`,() => {
        return gulp.src(path.src.css)
            .pipe(postcss(processors))
            .pipe(rename({suffix: `.min`}))
            .pipe(minifycss())
            .pipe(gulp.dest(path.build.css))
            .pipe(reload({stream: true}));

    });

    gulp.task(`lint`,() => {
        return gulp.src(path.src.js)
            .pipe(jshint())
            .pipe(jshint.reporter(`default`));
    });

    gulp.task(`script`,() => {
        return gulp.src(path.src.js)
            .pipe(uglify())
            .pipe(rename({suffix: `.min`}))
            .pipe(gulp.dest(path.build.js))
            .pipe(reload({stream: true}));
    });

    gulp.task(`fonts`, (cb) => {

        let buffers = [];

        gulp.src(path.src.html)
            .on(`data`, (file) => {
                buffers.push(file.contents);
            })
            .on(`end`, () => {
                let text = Buffer.concat(buffers).toString(`utf-8`);
                return minifyFont(text, cb);
            });
    });

    gulp.task(`img`, () => {
        return gulp.src(path.src.img)
            .pipe(imagesmin({
                progressive: true,
                use: [pngquant()]
            }))
            .pipe(gulp.dest(path.build.img))
            .pipe(reload({stream: true}));;
    });

    gulp.task(`html`, () => {

        return gulp.src(path.src.html)

            .pipe(through.obj( (file, encode,cb) => {

                let content = file.contents.toString(encode);

                let $ = cheerio.load(content,{decodeEntities:false});

                let aLink = $(`link`);

                let aScript = $(`script`);

                rep($,aLink);

                rep($,aScript);

                content = $.html();

                let miniHtml = html(content,{
                    minifyCSS:true,
                    minifyJS:true,
                    collapseWhitespace:true,
                    removeAttributeQuotes:true
                });
                file.contents = new Buffer(miniHtml,encode);
                cb(null,file,encode);
            }))
            .pipe(gulp.dest(path.build.html))
            .pipe(reload({stream: true}));
    });

    gulp.task(`ico`, () => {
        return gulp.src(path.src.ico)
            .pipe(gulp.dest(path.build.html));
    });

    gulp.task(`clean`, () => {

           return gulp.src([path.build.html], {read: false})

            .pipe(clean());
    });

    gulp.task(`default`,[`clean`], () => {
        gulp.start(`browser-sync`, `lint`, `html`, `fonts`, `script`, `img`, `css`, `ico`);
        gulp.watch(path.src.html, [`html`]);
        gulp.watch(path.src.css, [`css`]);
        gulp.watch(path.src.images, [`img`]);
        gulp.watch(path.src.js, [`script`]);
        gulp.watch(path.src.fonts, [`fonts`]);
    });

    let rep = ($,hrefs) => {

        hrefs.each((index, item) => {

            let oLink = $(item);

            if(oLink.attr(`rel`) === `stylesheet`){

                let href = oLink.attr(`href`).replace(/\.\w+$/g,(str) => {
                    return `.min${str}`;
                });

                oLink.attr(`href`,href);

            }else if(oLink.attr(`type`) === `text/javascript`){

                let href = oLink.attr(`src`).replace(/\.\w+$/g,(str) => {
                    return `.min${str}`;
                });

                oLink.attr(`src`,href);

            }
        });

    };

    let minifyFont = (text, cb) =>  {
        return gulp.src(path.src.fonts)
            .pipe(fontmin({
                text: text
            }))
            .pipe(gulp.dest(path.build.fonts))
            .on(`end`, cb);
    };
}

gulp一些基础用法可以去 http://www.imooc.com/course/list 看看，很不错的，我给66个赞。。。