f这篇或者是这篇文章比较好地介绍安装，api入门，插件介绍。
，中文英文无所谓啦。
安装
- 安装npm或者cnpm，因为不得不忽略的wall，所以建议cnpm
项目首先安装cnpm,然后cnpm init初始化package.json文件 - 安装gulp，save-dev保存到devDependencies节点
cnpm install gulp --save-dev
cnpm install gulp-less --save-dev - 或者安装gulp以及插件通过在package.json添加下文的内容，并且
cnpm install安装相应的插件
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.11",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-minify-css": "^1.2.4",
"gulp-sourcemaps": "^1.6.0"
}
当然你也可以直接命令行，安装多个
`cnpm install gulp gulp-less --save-dev`
gulp配置
- 新建gulp文件,
gulpfile.js - 然后在里面导入gulp模块
require("gulp")
关于gulp-plugins
因为安装gulp插件，每次都要导入类似，组件多了管理起来麻烦
var less = require("gulp-less");
而利用gulp-plugins,能够不用再require很多gulp组件
var plugins = require('gulp-load-plugins')();
//只要安装了gulp-less,就可以直接用plugins.less而不用每次导入gulp-less
注意转化的写法，默认是驼峰式的gulp-clean-css要写成`plugins.cleanCss'.
针对html的gulp工具
- gulp-htmlmin 压缩文件
- gulp-html-replace 用来替代html里面的内容
gulp.task("html",function(){
return gulp.src("./src/index.html")
.pipe(plugins.htmlmin({
collapseWhitespace:true
}))
.pipe(gulp.dest("./bin"));
})
针对CSS的工具
- gulp-less
less转css - gulp-autoprefixer
css自动处理，来帮助兼容 - gulp-clean-css
帮助压缩css文件
cnpm install gulp gulp-load-plugins gulp-less gulp-autoprefixer gulp-minify-css gulp-clean-css --save-dev
gulpfile.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task("less",function(){
//less2css('./src/less/index.less',"./bin/")
return gulp.src("./src/index.less")
.pipe(plugins.less())
.pipe(plugins.autoprefixer({
browers:["> 5%"],
cascade:true
}))
.pipe(plugins.cleanCss())
.pipe(gulp.dest("./bin"));
});
针对js的文件
- gulp-concat 合并js文件
- gulp-uglify 压缩js文件
其他
- gulp-imagemin 图片压缩
- gulp-live-server和gulp.watch结合，自动更新页面
- gulp-gh-pages
这是一个自动部署项目demo的插件，我个人经常遇到rev-list执行不下去的问题
https://github.com/shinnn/gulp-gh-pages/issues/42#issuecomment-87571440
var gulp = require('gulp');
var gls = require('gulp-live-server');
gulp.task('serve', function() {
//1. serve with default settings
var server = gls.static(); //equals to gls.static('public', 3000);
server.start();
//2. serve at custom port
var server = gls.static('dist', 8888);
server.start();
//3. serve multi folders
var server = gls.static(['dist', '.tmp']);
server.start();
//use gulp.watch to trigger server actions(notify, start or stop)
gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {
server.notify.apply(server, [file]);
});
});
- 看到有人介绍 browsersync,可以多设备自动更新。
相关插件搜索当然是npm的搜索列表啦 这里
个人配置模板
整理出来的一份简易的gulp文件配置。
cnpm install gulp gulp-load-plugins gulp-less gulp-autoprefixer gulp-minify-css gulp-htmlmin gulp-livereload gulp-sourcemaps gulp notify gulp-uglify gulp-plumber --save-dev
var gulp = require('gulp');
var webpack = require('webpack-stream');
var plugins = require('gulp-load-plugins')();
var gls = require("gulp-live-server");
var dist_path = './bin/';
var src_path = './src/';
var less_files = src_path + "index.less";
var html_files = src_path + "index.html";
var js_entry_files = src_path + "main.js";
var js_out_file_name = "out.js";
var remoteUrl = ""
var server = gls.static(dist_path, 8000);
gulp.task("less", function () {
return gulp.src(less_files)
.pipe(plugins.less())
.pipe(plugins.autoprefixer({
browers: ["> 5%"],
cascade: true
}))
.pipe(gulp.dest(src_path))
.pipe(plugins.cleanCss())
.pipe(gulp.dest(dist_path));
});
gulp.task("html", function () {
return gulp.src(html_files)
.pipe(plugins.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist_path));
});
gulp.task("js", function () {
gulp.src(js_entry_files)
.pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')}))
.pipe(webpack({
watch: false,
output: {
filename: js_out_file_name
}
}))
.pipe(plugins.uglify())
.pipe(gulp.dest(dist_path))
});
/**************** Build ***************/
gulp.task("build", ["less", "html", "js"]);
gulp.task("server", ["build"], function () {
server.start();
})
/*************** Deploy **************/
gulp.task("deploy", function () {
return gulp.src(dist_path + '**/*')
.pipe(plugins.ghPages({
remoteUrl: remoteUrl
}));
});
/**************** Watch *****************/
gulp.task('watch', ['server'], function () {
gulp.watch([src_path + '**/*.less'],
['less']);
gulp.watch([src_path + '**/*.js', 'resume.json'], ['js']);
gulp.watch(src_path + 'index.html', ['html']);
gulp.watch(dist_path + '**/*', function () {
server.notify.apply(server, arguments);
});
});
gulp.task("default", ['build']);
正常的dependencies
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.11",
"gulp-gh-pages": "^0.5.4",
"gulp-htmlmin": "^2.0.0",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.2.4",
"gulp-minify-css": "^1.2.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.4",
"vue": "^1.0.26",
"webpack": "^1.13.1"
}
