tool - gulp

Tool、 2017-02-21 资料整理

gulp

入门指南

本文主要了解gulp,存在偏差忘指正。

安装gulp什么的就不去多说了,可以上gulp跟着节奏一步步走下来,基本上也就安装完成了。

主要告诉大家的是gulp中几个比较重要的api和一些我用到的api.当然后期也会进行适当的补充。

1 - gulp.task(name[, deps], fn)

name：任务的名字

deps：一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn：该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

任务列表是可以省略的. 如下：

gulp.task('html', function () {
    DEST = 'html/';
});

有任务执行就必定有处理的先后顺序.默认情况下gulp的task是以最大的并发数进行的。某些相关依赖的任务可能就无法完成。

如何异步调用这些任务?

解决办法

根据deps这些任务会在你当前任务运行之前完成的相关理解。

// gulp 执行任务的时候会先去执行one,再去执行two。
gulp.task('one',function(){
    return // do something

})

gulp.task('two', ['one'],function(){
    // do something
})

gulp.task('default', ['two'], function(){

})

当然官网上也有些例子,处理异步的。可以相互探讨下

2 - gulp.src(globs[, options])

这里我们只讲globs,可以理解为符合匹配模式的需要操作的路径。

gulp.src(['./src/fn/*.js', '!./src/fn/common/*.js'])

gulp.src('./src/fn/main.js')

3 - gulp.dest(path[, options])

这里我们只讲path,文件将被写入的路径（输出目录)

gulp.dest('./build/minified_templates')

4 - gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件，并且可以在文件发生改动时候做一些事情

glob：监视哪些文件发生了变动

tasks：文件变动后所执行的相关任务

cb：每次变动需要执行的 callback。

gulp插件

以下是我用到的插件。

相关的说明和文档可以到这里去查找

gulp-concat - 合并文件

gulp-uglify - 压缩js

gulp-rename - 重命名文件

gulp-ruby-sass - 编译并压缩sass,scss

参数说明

 * style有以下4种选择：
     ● nested：嵌套缩进，它是默认值
     ● expanded：每个属性占一行
     ● compact：每条样式占一行
     ● compressed：整个压缩成一行

gulp-autoprefixer - 自动增加css前缀

参数说明

● last 2 versions: 主流浏览器的最新两个版本
● last 1 Chrome versions: 谷歌浏览器的最新版本
● last 2 Explorer versions: IE的最新两个版本
● last 3 Safari versions: 苹果浏览器最新三个版本
● Firefox >= 20: 火狐浏览器的版本大于或等于20
● iOS 7: IOS7版本
● Firefox ESR: 最新ESR版本的火狐
● > 5%: 全球统计有超过5%的使用率

gulp-inject - 引入公共部分js和css

gulp-file-include - 引入文件内容

gulp-clean - 清除文件

gulp-htmlmin - 压缩html

gulp-cssmin - 压缩css

gulp-rev-hash - hash

path

browser-sync

想知道我是干嘛的?点击这里

下面是我的整个gulpfile文件

/**
 * gulpfile
 * q: scss编译成css在引用
 */
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    inject = require('gulp-inject'),
    fileinclude = require('gulp-file-include'),
    clean = require('gulp-clean'),
    htmlmin = require('gulp-htmlmin'),
    cssmin = require('gulp-cssmin'),
    rev = require('gulp-rev-hash'),
    path = require('path'),
    browserSync = require('browser-sync').create();

var DEST;
var ROOT_PATH = path.resolve(__dirname);
var HTML_PATH = path.resolve(ROOT_PATH, 'view/*.html');

// 开发环境目录
gulp.task('build', function () {
    DEST = 'build/';
});
// 生产环境目录
gulp.task('html', function () {
    DEST = 'html/';
});

/**
 * clean
 * 清除文件.文件夹
 */
gulp.task('clean', function () {
    return gulp.src(DEST)
        .pipe(clean({force: true}));
});

/**
 * hash
 * 增加hash
 */
gulp.task('hash', ['packHtml'], function () {
    return gulp.src(DEST + '/view/*.html')
        .pipe(rev({'assetsDir':'./' + DEST}))
        .pipe(gulp.dest(DEST +'/view/'));
});

/**
 * htmlmin
 * 压缩html
 */
gulp.task('htmlmin', ['hash'], function () {
    gulp.start(['cssmin']);
    var options = {
        collapseWhitespace: true,       //压缩HTML
        minifyJS: true,                 //压缩页面JS
        minifyCSS: true                 //压缩页面CSS
    };
    return gulp.src(DEST + 'view/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(DEST + '/view'));
});

/**
 * cssmin
 * 压缩css
 */
gulp.task('cssmin', function () {
    return gulp.src([DEST + 'style/*.css', DEST + 'style/**/*.css'])
        .pipe(cssmin())
        .pipe(gulp.dest(DEST + '/style'))

});

/**
 * javascript
 * 合并公共的js
 */
gulp.task('scripts', function () {
    if (DEST.indexOf('build') != -1) {
        // build
        return gulp.src([
                './src/fn/common/smartresize.js',
                './src/fn/common/common.js'
            ])
            .pipe(concat('common.js'))
            .pipe(gulp.dest(DEST + '/src/fn/common'))
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
            .pipe(gulp.dest(DEST + '/src/fn/common'))
            .pipe(browserSync.stream());
    } else {
        // html
        return gulp.src([
                './src/fn/common/smartresize.js',
                './src/fn/common/common.js'
            ])
            .pipe(concat('common.js'))
            .pipe(uglify())
            .pipe(gulp.dest(DEST + '/src/fn/common'))
            .pipe(browserSync.stream());
    }
});

/**
 * style
 * sass,scss
 * autoprefixer 自动处理游览器前缀
 * @param filename
 * @param options
 * @param url
 * @returns {*}
 */

//var compileCommonSASS = function (filename, options, url) {
//    return sass(url, options)
//        .pipe(autoprefixer('last 2 versions', '> 5%'))
//        .pipe(concat(filename))
//        .pipe(gulp.dest('./style/common/'))
//        .pipe(browserSync.stream());
//};
var compileCommonSASS = function (options, url) {
    if( DEST.indexOf('build') != -1 ){
        // build
        return sass(url, options)
            .pipe(autoprefixer('last 2 versions', '> 5%'))
            .pipe(gulp.dest('./style/css/'))
            .pipe(gulp.dest(DEST + '/style/css/'))
            .pipe(browserSync.stream());
    }else{
        // html
        return sass(url, options)
            .pipe(autoprefixer('last 2 versions', '> 5%'))
            .pipe(gulp.dest(DEST + '/style/css/'))
            .pipe(browserSync.stream());
    }
};

/**
 * 编译sass
 * style有以下4种选择：
 * nested：          嵌套缩进，它是默认值
 * expanded：        每个属性占一行
 * compact：         每条样式占一行
 * compressed：      整个压缩成一行
 */
gulp.task('sass', function () {
    var url = ['./style/scss/*.{scss,sass}'];

    if (DEST.indexOf('build') != -1) {
        return compileCommonSASS({}, url);
    } else {
        //return compileCommonSASS({}, url);
        return compileCommonSASS({style: 'compressed'}, url);
    }

});

/**
 * html
 * 合并html => include
 * @param srcArr
 * @returns {*}
 */
var pickHtml = function (srcArr) {
    return gulp.src(HTML_PATH)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(inject(gulp.src(srcArr, {read: false}), {relative: true}))
        .pipe(gulp.dest(DEST + '/view'));
};

gulp.task('packHtml', ['sass', 'scripts'], function () {
    var srcArr;

    if (DEST.indexOf('build') != -1) {
        srcArr = [
            './src/plugin/bootstrap/css/bootstrap.css',
            './src/plugin/font-awesome/css/font-awesome.css',
            './src/plugin/nprogress/css/nprogress.css',
            './src/plugin/animate/css/animate.css',
            './src/plugin/daterangepicker/css/daterangepicker.css',
            './src/plugin/iCheck/skins/flat/green.css',
            './src/plugin/toastr/toastr.min.css',
            './style/css/custom.css',
            './src/plugin/jquery/js/jquery.js',
            './src/plugin/bootstrap/js/bootstrap.js',
            './src/plugin/moment/js/moment.min.js',
            './src/plugin/daterangepicker/js/daterangepicker.js',
            './src/plugin/iCheck/js/icheck.js',
            './src/plugin/nprogress/js/nprogress.js',
            './src/plugin/jquery.paginator/jqPaginator.min.js',
            './src/plugin/toastr/toastr.min.js',
            './src/fn/common/common.js'
        ];

    } else {
        srcArr = [
            './src/plugin/bootstrap/css/bootstrap.min.css',
            './src/plugin/font-awesome/css/font-awesome.min.css',
            './src/plugin/nprogress/css/nprogress.min.css',
            './src/plugin/animate/css/animate.min.css',
            './src/plugin/daterangepicker/css/daterangepicker.min.css',
            './src/plugin/iCheck/skins/flat/green.min.css',
            './src/plugin/toastr/toastr.min.css',
            './style/css/custom.css',
            './src/plugin/jquery/js/jquery.min.js',
            './src/plugin/bootstrap/js/bootstrap.min.js',
            './src/plugin/moment/js/moment.min.js',
            './src/plugin/daterangepicker/js/daterangepicker.min.js',
            './src/plugin/iCheck/js/icheck.min.js',
            './src/plugin/nprogress/js/nprogress.min.js',
            './src/plugin/jquery.paginator/jqPaginator.min.js',
            './src/plugin/toastr/toastr.min.js',
            './src/fn/common/common.js'
        ];
    }

    return pickHtml(srcArr)
});

/**
 * 静态服务器
 */
gulp.task('browser-sync', ['packHtml'], function () {
    return browserSync.init({
        server: {
            baseDir: './'
        },
        startPath: './build/view/login.html'
    }, function () {
        console.log('============browser-sync服务启动完成!============')
    });
});

/**
 * copy
 * 复制
 */
gulp.task('copy-plugin', function () {
    return gulp.src(['./src/plugin/**'])
        .pipe(gulp.dest(DEST + '/src/plugin'))
});

gulp.task('copy-js', function () {

    if (DEST.indexOf('build') != -1) {
        return gulp.src(['./src/fn/*.js', '!./src/fn/common/*.js'])
            .pipe(gulp.dest(DEST + '/src/fn'))
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
            .pipe(gulp.dest(DEST + '/src/fn'))
    } else {
        return gulp.src(['./src/fn/*.js', '!./src/fn/common/*.js'])
            .pipe(uglify())
            .pipe(gulp.dest(DEST + '/src/fn'))
    }

});

/**
 * watch
 */

gulp.task('watch', function () {
    // Watch .html files
    gulp.watch('view/*.html', ['packHtml'], browserSync.reload);

    // Watch .js files
    gulp.watch(['src/fn/**.js'], ['copy-js'], browserSync.reload);

    // Watch .scss files
    gulp.watch(['style/scss/*.{sass,scss}'], ['sass'], browserSync.reload);
    // Watch .js files
    //gulp.watch('src/js/*.js', ['scripts']);
    // Watch .scss files
    //gulp.watch('src/scss/*.scss', ['sass']);
});

// Dev Task
// 开发环境
gulp.task('dev', ['build', 'clean'], function () {
    gulp.start(['copy-plugin', 'copy-js', 'browser-sync', 'watch']);
    console.log('============dev OK version!============')
});

// Rc Task
// 生产环境
gulp.task('rc', ['html', 'clean'], function () {
    gulp.start(['copy-plugin', 'copy-js', 'hash', 'htmlmin']);
    console.log('============rc OK version!============')
});

资料

gulp中文网

Lijiahao8898 F2E