gulp入门

f这篇或者是这篇文章比较好地介绍安装，api入门，插件介绍。
，中文英文无所谓啦。

安装

1. 安装npm或者cnpm，因为不得不忽略的wall，所以建议cnpm
   项目首先安装cnpm,然后cnpm init初始化package.json文件
2. 安装gulp，save-dev保存到devDependencies节点
   cnpm install gulp --save-dev
cnpm install gulp-less --save-dev
3. 或者安装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配置

1. 新建gulp文件,gulpfile.js
2. 然后在里面导入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"
  }