gulp 的【常用】各种插件包介绍 - 不分前后先看下图表格
gulp常用插件列表
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 使用方法
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/'));
});
所有代码直接拷贝即可使用，轻松完成打包不在话下，不知道怎么使用，可以先看小编的另外两篇入门gulp介绍。
上篇：gulp-前端构建入门
中篇：gulp-团队协作进阶篇