一. 前言
Yeoman：前端腳手架骑歹，快速搭建前端開發(fā)環(huán)境茫叭，優(yōu)化工作流~
Gulp：工程化構(gòu)建工具会烙，基于task來處理任務(wù)
Webpack：最常見的前端構(gòu)建工具残炮，類似與gulp韭赘，但不如gulp靈活，專注于代碼打包編譯
OK势就，主人公們介紹完了泉瞻，該篇主要說明三個(gè)工具的基本用法，安裝配置自己解決苞冯。
二. Yeoman
Q:
i.在寫東西的時(shí)候經(jīng)常會(huì)遇到一些重復(fù)性的操作和代碼袖牙，苦于Ctrl+c
ii.人數(shù)較多的前端團(tuán)隊(duì)10個(gè)人擁有十種代碼風(fēng)格，十種項(xiàng)目結(jié)構(gòu)舅锄，后期維護(hù)及其繁瑣
——使用Yeoman 達(dá)到One Code Style One Directory Structure
1.安裝:
$ cnpm install -g yo
2.使用：
yeoman 提供很多generator鞭达，可以直接使用
$ mkdir project-name
$ cd project-name
$ yo
按照提示選擇需要的模板就行了，這里主要說一說怎么私人訂制~~~嘻嘻
3.創(chuàng)建自己的generator
yeoman官方提供了generator-generator 來幫助我們自定義生成器皇忿，良心啊~~~
$ cnpm install -g generator-generator
$ yo generator
然后你的根目錄下就會(huì)生成如下結(jié)構(gòu)：
我們需要做的就是在index.js中來創(chuàng)造我們自己的generator
'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
module.exports = class extends Generator {
prompting() {
// Have Yeoman greet the user.
this.log(
yosay(`Welcome to the tiptop ${chalk.red('generator-xy')} generator!`)
);
const prompts = [
{
type: 'confirm',
name: 'someAnswer',
message: 'Would you like to enable this option?',
default: true
}
];
return this.prompt(prompts).then(props => {
// To access props later use this.props.someAnswer;
this.props = props;
});
}
writing() {
this.fs.copy(
this.templatePath('dummyfile.txt'),
this.destinationPath('dummyfile.txt')
);
}
install() {
this.installDependencies();
}
};
可以看到核心的流程是在一個(gè)繼承了generator的類當(dāng)中
其實(shí)這里generator一共提供了 initializing畴蹭，prompting，configuring鳍烁，default叨襟，writing，conflicts幔荒，install糊闽，end這幾個(gè)函數(shù)
Prompting()方法是執(zhí)行前的過渡梳玫，實(shí)現(xiàn)與用戶的交互，你可以在prompts問題集中定義一些問題墓怀，比如你叫啥汽纠，干啥，弄啥傀履，家里幾口人，人均幾畝地...........然后將用戶輸入的內(nèi)容保存在this.props中莉炉，方便以后調(diào)用钓账。
我們自己來寫一個(gè)
prompting() {
// Have Yeoman greet the user.
this.log(
yosay(`Welcome to the tiptop ${chalk.red('generator-xy')} generator!`)
);
return this.prompt([{
type : 'input',
name : 'appname',
message : 'input your project name',
default : this.appname
}
]).then((answers) => {
this.log('appname ：', answers.appname);
this.props = answers;
})
}
在后面的方法中，我們便可以通過this.props.appname來獲取到輸入的項(xiàng)目名稱
我們在原來的基礎(chǔ)上定義一個(gè)defaults方法來生成用戶輸入的目錄
const path = require('path');
const mkdirp = require('mkdirp');
defaults () {
if (path.basename(this.destinationPath()) !== this.props.appname) { //判斷是否存在該目錄
this.log(
'Your generator must be inside a folder named ' + this.props.appname + '\n' +
'I\'ll automatically create this folder.'
);
mkdirp(this.props.appname); // 即 mkdir -p 創(chuàng)建該目錄
this.destinationRoot(this.destinationPath(this.props.appname));
}
}
writing方法用來書寫創(chuàng)建工程文件的步驟
在這之前我們首先在template文件夾下創(chuàng)建一個(gè)public目錄絮宁，里面創(chuàng)建如下文件作為咱們這個(gè)初級教程的全部內(nèi)容
開始寫writing方法
writing() {
mkdirp('css'); //創(chuàng)建css文件夾
mkdirp('js'); //創(chuàng)建js文件夾
this.fs.copy( //調(diào)用方法將模板的內(nèi)容創(chuàng)建到根目錄
this.templatePath('public/index.html'), //模板文件地址
this.destinationPath('index.html'), //創(chuàng)建在根目錄
),
this.fs.copy(
this.templatePath('public/index.css'),
this.destinationPath('css/index.css')
);
this.fs.copy(
this.templatePath('public/index.js'),
this.destinationPath('js/index.js')
);
}
最后install方法梆暮，官方的api說的很清楚this.installDependencies()，即是用來安裝我們項(xiàng)目依賴的
install() {
this.npmInstall(['jquery'], { 'save-dev': true });
}
這里就安裝一個(gè)jquery作為說明即可绍昂。
最后我們在根目錄執(zhí)行
$ npm link
這樣我們就可以在全局使用該generator了
然后切換到開發(fā)目錄啦粹，執(zhí)行
$ yo xy
按照步驟，最后我們生成的開發(fā)目錄的結(jié)構(gòu)如下
然后你就可以開始編碼了窘游，so easy今后所有這種類型的項(xiàng)目一個(gè)命令幾秒鐘就可以開始愉快的編碼唠椭，而且代碼風(fēng)格統(tǒng)一~~~
三. Gulp+Webpack
這里把Gulp和Webpack放到一起來說。
博主最早是只用了webpack來構(gòu)建自己的項(xiàng)目忍饰，后來加入Gulp對其進(jìn)行整合贪嫂，發(fā)現(xiàn)配合食用，口感更佳呀
核心依然是plugin
!Webpack出口文件即Gulp入口文件
這里也只是講如何寫一個(gè)初略的gulpfile.js
核心便是task,src,start,watch等api艾蓝，詳細(xì)說明見官網(wǎng)Gulp Api
基本工作流程：
i. 通過gulp.src()方法獲取到我們想要處理的文件流(Vinyl files 的 stream)力崇，
ii. 把文件流通過pipe方法導(dǎo)入到gulp的插件中進(jìn)行處理，比如調(diào)用concat方法合并所有css赢织，再調(diào)用minify()壓縮css亮靴。（具體插件用法，npm官網(wǎng)均有介紹）
iii. 把處理后的流再通過pipe方法導(dǎo)入到gulp.dest()中于置，最后把流中的內(nèi)容寫入到文件中
項(xiàng)目結(jié)構(gòu)
gulpfile.js
//加載外掛：自動(dòng)瞄準(zhǔn)茧吊，無后座，鎖血俱两，大挪移.......~~~
var gulp = require('gulp'),
minify=require('gulp-minify-css');
autoprefixer = require('gulp-autoprefixer'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
fileinclude = require('gulp-file-include'),
webpack = require('gulp-webpack');
gulp.task('css', function() {
gulp.src('src/css/*.css')
.pipe(concat('main.css'))
.pipe(minify())
.pipe(gulp.dest('dist/css'));
})
gulp.task('scripts', function() {
return gulp.src('src/entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('dist/js'));
});
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images compile complete' }));
});
gulp.task('html', function() {
return gulp.src('src/**/*.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/'))
.pipe(notify({ message: 'html compile complete' }));
});
gulp.task('clean', function() {
return gulp.src(['dist/css', 'dist/js', 'dist/images'], {read: false})
.pipe(clean());
});
gulp.task('default', ['clean'], function() {
gulp.start('css','scripts', 'images', 'html');
});
gulp.task('watch', function() {
gulp.watch('src/css/**/*.css', ['css']);
gulp.watch('src/js/**/*.js', ['scripts']);
gulp.watch('src/images/**/*', ['images']);
gulp.watch('src/**/*.html', ['html']) ;
livereload.listen();
gulp.watch(['dist/**']).on('change', livereload.changed);
});
1.插件的話按需自取饱狂，這里我用的插件是包含了處理所有文件的∠懿剩可以酌情增減
2.gulp.task第一個(gè)參數(shù)為任務(wù)名休讳，gulp task-name 即可執(zhí)行對應(yīng)的任務(wù)，這里需要解釋的就是對于js的處理尿孔。剛才說過webpack的出口文件就是gulp的入口文件俊柔，這里我們用到了gulp-webpack包來優(yōu)化筹麸。
3.在默認(rèn)任務(wù)這里執(zhí)行編譯之前調(diào)用gulp.clean清空上一次的編譯結(jié)果
4.這里使用了livereload插件，需要配置Chrome（美中不足雏婶，顯然沒有webpack-dev-server實(shí)在拔锔稀）
5.運(yùn)行
$ gulp
$ gulp watch
