1. 什么是前端構建，有哪些常見的前端構建工具?
實現前端代碼的編譯（sass、less）、壓縮、測試；圖片的壓縮以及瀏覽器自動刷新等等功能的過程就叫做前端構建。常見的前端構建工具有gulp、Grunt、webpack等。
2. gulp使用示例
1.安裝依賴
npm i gulp gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-clean gulp-htmlmin jshint gulp-jshint gulp-imagemin gulp-rev-replace gulp-useref gulp-rev -D
相關依賴版本號.png
2.目錄結構
index.html:
<head>
<!--a.css 和 b.css合并后的名字叫 111.css，這是我隨便起的-->
<!-- build:css css/111.css -->
<link rel="stylesheet" type="text/css" href="./css/a.css">
<link rel="stylesheet" type="text/css" href="./css/b.css">
<!-- endbuild -->
<!--c.css 和 d.css合并后的名字叫 222.css-->
<!-- build:css css/222.css -->
<link rel="stylesheet" type="text/css" href="./css/c.css">
<link rel="stylesheet" type="text/css" href="./css/d.css">
<!-- endbuild -->
</head>
<body>
<!--兩個js合并后的名字叫做 333.js-->
<!-- build:js js/333.js -->
<script type="text/javascript" src="./js/a.js"></script>
<script type="text/javascript" src="./js/b.js"></script>
<!-- endbuild -->
</body>
html中這種像注釋樣的尖括號包裹起來（<! -- build:開頭，<! -- endbuild -->結尾）的內容是我需要特殊處理的，我想把它們合并在一起（比如：這里表示我想將a.css和b.css合并成一個文件，c.css和d.css合并成另一個文件）。
3.gulpfile.js配置
// gulpfile.js
var gulp = require('gulp');
var minifycss = require('gulp-minify-css'), // CSS壓縮
uglify = require('gulp-uglify'), // js壓縮
concat = require('gulp-concat'), // 合并文件
clean = require('gulp-clean'), //清空文件夾
minhtml = require('gulp-htmlmin'), //html壓縮
jshint = require('gulp-jshint'), //js代碼規范性檢查
imagemin = require('gulp-imagemin'); //圖片壓縮
useref=require('gulp-useref'); //解析html資源定位
rev=require('gulp-rev'); //添加版本號
revReplace=require('gulp-rev-replace'); //替換html中引用的靜態資源的名稱
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(useref()) //解析html資源定位，即將html中用尖括號包裹起來合并到一起
.pipe(rev())
.pipe(revReplace())
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('css', function(argument) {
gulp.src('src/css/*.css')
.pipe(concat('merge.min.css')) //將所有的css合并在一起，名字叫做merge.min.css
.pipe(minifycss())
.pipe(rev())
.pipe(gulp.dest('dist/css/'));
});
gulp.task('js', function(argument) {
gulp.src('src/js/*.js')
.pipe(concat('merge.min.js'))
.pipe(jshint())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/js/'));
});
gulp.task('img', function(argument){
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
gulp.task('clear', function(){
gulp.src('dist/*',{read: false})
.pipe(clean());
});
gulp.task('build', ['css', 'js', 'img', 'html']); // 構建時運行gulp build
// gulp.task('default', ['css', 'js', 'img', 'html']); // 構建時直接運行gulp
4.執行gulp build即可完成自動構建，構建后的目錄如下：
紅色框中的三個文件從上到下分別是：a.css、b.css、c.css和d.css的合并、a.js和b.js的合并、html的壓縮文件。
而111,222,333開頭的三個文件則是加了
看構建后的html:
<head>
<link rel="stylesheet" href="css/111-afed3ecf96.css">
<link rel="stylesheet" href="css/222-ff636941f8.css">
</head>
<body>
<script src="js/333-f79e0e4098.js"></script>
</body>
如果構建前html文件中不加任何尖括號包裹起來（<! -- build:開頭，<! -- endbuild -->結尾）的內容，則構建之后只會生成紅色框中的三個文件，且構建后的html也會正確引用對應文件。
3. gulp配合browser-sync實現瀏覽器自動刷新
- 安裝
browser-sync
npm install browser-sync -D
- gulpfile.js中添加以下代碼
// gulpfile.js
var browserSync = require('browser-sync').create(); // 瀏覽器自動刷新
gulp.task('reload', function(){
browserSync.reload();
});
gulp.task('server', function() {
browserSync.init({
port:3000,
server: {
baseDir: "./src"
}
});
gulp.watch(['./src/**/*.css', './src/**/*.js', './src/**/*.html'], ['reload']);
});
- 執行
gulp server，即啟動了一個本地服務器，默認端口3000
