前端自動化構建的目標：
- 開發環境：
1.編譯html、Less/Sass(Exp: Less)、js;
2.實時刷新瀏覽器(文件變動，觸發刷新瀏覽器事件)； - 生產環境
1.編譯、壓縮html；
2.編譯、壓縮Less/Sass(Less為例子)；
3.編譯、壓縮js；
搭建環境
- 安裝nodejs
下載鏈接：http://nodejs.cn/download/
安裝完，在terminal，node -v 測試安裝成功否。 - packjson
npm init //初始化packjson文件
Paste_Image.png
- 安裝關鍵道具gulp
npm install -g gulp --save-dev //save-dev：包名保存到packjson中
- 需要用到的包
作用如變量名
Paste_Image.png
npm install -g browser-sync --save-dev //全局安裝
npm install -g gulp-less gulp-rename gulp-htmlmin --save-dev
npm install -g gulp-minify-css gulp-uglify gulp-notify --save-dev
-
新建gulpfile.js
不是太懂gulp語法，看官網文檔：http://www.gulpjs.com.cn/docs/api/填一下項目結構：
Paste_Image.png
PS: dist是打包目錄，一開始是空目錄
//填一下gulpfile文件自己體會
var gulp = require('gulp'),
less = require('gulp-less'), //編譯less
rename = require('gulp-rename'),
minHtml = require('gulp-htmlmin'),
minCss = require('gulp-minify-css'),
minJs = require('gulp-uglify'),
notify = require('gulp-notify'), //消息提醒
browserSync = require('browser-sync').create(), //實時刷新瀏覽器
reload = browserSync.reload;
var PRE = pre_suffix = 'less';
var root = {
htmlRoot: './dist/',
src: {
html: 'src/html/',
js: 'src/js/',
precss: function(sender){ return 'src/'+PRE+'/'+sender+'.'+pre_suffix; }
},
dist: {
html: 'dist/',
css: 'dist/css/',
js: 'dist/js/'
}
}
// 生產環境
gulp.task('html', function(){
var options = {
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
};
return gulp.src(root.src.html+'/*.html').
pipe(minHtml(options))
.pipe(gulp.dest(root.dist.html))
});
gulp.task('precss', function(){
return gulp.src('src/less/*.less')
.pipe(less())
.pipe(minCss())
.pipe(gulp.dest('dist/css'))
});
gulp.task('js', function(){
return gulp.src('src/js/*.js')
.pipe(minJs())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/js'))
});
gulp.task('build', ['html', 'precss' ,'js']);
// 開發環境
gulp.task('html:dev', function(){
return gulp.src(root.src.html+'/*.html')
.pipe(gulp.dest(root.dist.html))
.pipe(reload({stream: true}))
});
gulp.task('html-watch:dev', ['html:dev'], browserSync.reload);
gulp.task('precss:dev', function(){
return gulp.src(root.src.precss('/*'))
.pipe(less())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(root.dist.css))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('js:dev', function(){
return gulp.src(root.src.js+'/*.js')
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(root.dist.js))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('dev', ['html:dev', 'precss:dev' ,'js:dev'], function(){
browserSync.init({
server: { baseDir: root.htmlRoot }
});
gulp.watch(root.src.html+'/*.html', ['html:dev']);
gulp.watch(root.src.js+'/*.js', ['js:dev']);
gulp.watch([root.src.precss('/*'), root.src.precss('/*/*')], ['precss:dev']);
});
- 使用命令啟動任務
//在terminal，cd到當前目錄下
gulp dev //開發環境
gulp build //生產環境
- [可選]將命令保存到npm 腳本
打開packjson.json文件
在script處：
Paste_Image.png
PS:rimraf 是用來刪除文件的，不需要的可以去掉&&前的命令（包括&&）
//分別執行的命令
npm run dev
npm run build
- 補充：
關于壓縮html配置項的說明
1.collapseWhitespace:從字面意思應該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大；
2.collapseBooleanAttributes:省略布爾屬性的值，比如：<input checked="checked"/>,那么設置這個屬性后，就會變成 <input checked/>;
3.removeComments:清除html中注釋的部分，我們應該減少html頁面中的注釋。
4.removeEmptyAttributes:清除所有的空屬性，
5.removeSciptTypeAttributes:清除所有script標簽中的type="text/javascript"屬性。
6.removeStyleLinkTypeAttributes:清楚所有Link標簽上的type屬性。
7.minifyJS:壓縮html中的javascript代碼。
8.minifyCSS:壓縮html中的css代碼。
