gulp-高手装X进阶篇

2016/04/15

gulp 的【常用】各种插件包介绍 - 不分前后

插件包名	说明
fs	读取一个 jsons 文件
gulp-less	less 编译
gulp-sass	scss 编译
gulp-postcss	css 插件处理器
autoprefixer	解析 css 添加前缀 css 规则
cssnano	css 优化
gulp-uglify	压缩文件
gulp-sourcemaps	生成 source map 文件
gulp-handlebars	编译模板成 js
gulp-define-module	编译 handlebars 模板的类型
gulp-clean	删除文件
gulp-notify	消息提示
minimist	命令行参数解析
gulp-requirejs-optimize	AMD 模块打包
gulp-sequence	gulp 任务合并
gulp-ftp	上传文件
gulp-html2js	AngularJS templates 转 js

fs 使用方法

var fs = require('fs');

// 基础配置信息获取
var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));

gulp.task('default', function () {
	console.log(pkg);
	console.log(pkg.name);
});

// cmd 命令行输入：gulp

gulp-less 使用方法

var less = require('gulp-less');

gulp.task('less', function () {
	return gulp.src('./src/less/**/*.less', {
            base: './src/'
        })
        .pipe(less())
        .pipe(gulp.dest('./dist/'))
});

// cmd 命令行输入：gulp less

gulp-sass 使用方法

var sass = require('gulp-sass');

gulp.task('sass', function () {
	return gulp.src('./src/scss/**/*.scss', {
            base: './src/'
        })
        .pipe(sass())
        .pipe(gulp.dest('./dist/'))
});

// cmd 命令行输入：gulp less

gulp-postcss、autoprefixer、cssnano 使用方法

var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano      = require('cssnano');
var processors   = [
   autoprefixer({
       browsers: ['last 2 versions', 'Android >= 4.0'] // 指定浏览器需要兼容的版本
   }),
   cssnano({
       reduceIdents: false,
       zindex: false
   })
];

gulp.task('css', function () {
    return gulp.src('./dist/**/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dist/'));
});

// cmd 命令行输入：gulp css

gulp-uglify 使用方法

var uglify = require('gulp-uglify');

gulp.task('js', function() {
    return gulp.src('./src/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'));
});

// cmd 命令行输入：gulp js

gulp-sourcemaps 使用方法

var uglify     = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('js-map', function() {
    return gulp.src('./src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/'));
});

// cmd 命令行输入：gulp js-map

gulp-handlebars、gulp-define-module 使用方法

var handlebars   = require('gulp-handlebars');
var defineModule = require('gulp-define-module');

gulp.task('tpl', function() {
    return gulp.src('./src/**/*.js')
        .pipe(handlebars())
        .pipe(defineModule('amd'))
        .pipe(gulp.dest('./src/'));
});

// cmd 命令行输入：gulp tpl

gulp-clean、gulp-notify 使用方法

var clean  = require('gulp-clean');
var notify = require('gulp-notify');

gulp.task('clean-css', function() {
    return gulp.src('./dist/**/*.css')
        .pipe(clean())
        .pipe(notify({
        	    message: 'clean-css task complete'
        }));
});

// cmd 命令行输入：gulp clean-css

minimist 使用方法

var minimist     = require('minimist');
var knownOptions = {
    string: 'nav',
    default: {
        nav: process.env.NODE_ENV || '',
        env: process.env.NODE_ENV || ''
    }
};

var nav_string = minimist(process.argv.slice(2), knownOptions);
gulp.task('minimist', function() {
    console.log(nav)
    console.log(nav.nav);
    console.log(nav.env);
});

// cmd 命令行输入：gulp minimist --nav aaaaaaa
// 结果：{ _: [], nav: 'aaaaaaa' }

// cmd 命令行输入：gulp minimist --env bbbbbbb
// 结果：{ _: [], env: 'bbbbbbb' }

// cmd 命令行输入：gulp minimist --nav aaaaaaa --env bbbbbbb
// 结果：{ _: [], nav: 'aaaaaaa', env: 'bbbbbbb' }

gulp-requirejs-optimize 使用方法

var requirejsOptimize = require('gulp-requirejs-optimize');

gulp.task('rjs', function () {
    return gulp.src(['./src/project/**/*.js', '!./src/{public,modules,project}/**/*.{hbs,scss,less}', '!./src/{global,libs}', '!./src/{global,libs}/**/*'], {
            base: './src/'
        })
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(requirejsOptimize({
            keepBuildDir: true,
            baseUrl: './src/',
            paths: paths,
            //optimize: 'uglify'
            optimize: 'none'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/'));
});

gulp-ftp 使用方法

var ftp = require('gulp-ftp');

gulp.task('test', function () {
	return gulp.src('./src/project/**/*.js')
		.pipe(ftp({
		  host: '127.0.0.1',
		  user: 'username',
		  pass: 'userpass',
		  remotePath: 'ftp远程路径'
		}));
});

gulp-sequence 使用方法

1
2
3

var gulpSequence = require('gulp-sequence');

gulp.task('default', gulpSequence('clean', 'scss', 'tpl', 'rjs'));

gulp-html2js 使用方法

var gulpHtml2js = require('gulp-html2js');

gulp.task('default', function () {
    gulp.src('templates/*.html')
        .pipe(gulpHtml2js('angular.js', {
            adapter: 'angular',
            base: 'templates',
            name: 'angular-demo'
        }))
        .pipe(gulp.dest('dist/'));
});

// or

gulp.task('default', function () {
    gulp.src('templates/*.html')
        .pipe(html2js('js-demo.js', {
            adapter: 'javascript',
            base: 'templates',
            name: 'js-demo'
        }))
        .pipe(gulp.dest('dist/'));
});

待续! 待续! 待续!

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。