为什么要做前端工程化?
1,校验无误后,合并压缩多个js文件
2,对css文件进行编译(各种css框架,如sass less)
使用工具:
用git辅助cmd(不用频繁找文件位置了)
gulp构建工具进行编译(自行安装)
插件:代码中有标出(自行去下载)
注意下载插件的方式(例如gulp-jshint):
npm install –save-dev jshint gulp-jshint
// 引用插件
var gulp=require('gulp');//引入gulp
var hint=require("gulp-jshint");//1,校验js
var concat=require("gulp-concat");//2,连接所有的js到一个包中的插件
var uglify=require("gulp-uglify");//3,压缩js文件
var sass=require("gulp-sass");//4,sass插件
var browserSync=require("browser-sync").create();//5,引用浏览器服务插件,承担了http-server的功能,启动服务器
// 引用插件完
gulp.task("default",['script','style'],function(){//在js css编译后。。。。
browserSync.init({
server:{
baseDir:'./'//定位到当前文件
}
})//启动服务器插件
/* 当文件有任何改动,用监听方法,直接刷新页面就行,不用一直gulp,
还有一种在每个任务里面的最后面加上:.pipe(browserSync.stream());
改css不用刷新,但是改js需要刷新,html也得刷新,不让html刷新的api是:browserSync.reload(),使用watch方式去执行
*/
gulp.watch(['./style/**/*.scss'],['style']);
gulp.watch(['./script/**/*.js'],['script']);
})
// 编译css任务
gulp.task("style",function(){
return gulp.src(['./style/**/*.scss'])
.pipe(sass())
.pipe(gulp.dest('./dest'))//把正确的sass文件编译后放到编译文件dest中
.pipe(browserSync.stream());
})
// 编译js任务
gulp.task("script",function(){
return gulp.src(['./script/**/*.js'])//先找到所有js文件(源文件没经过任何处理的)
.pipe(hint())
.pipe(hint.reporter("default"))//输出形式,默认default
.pipe(hint.reporter("fail"))//输出错误并终止程序(校验)
.pipe(concat('index.js'))//连接文件
.pipe(uglify())//压缩文件
.pipe(gulp.dest('./dest'))//把正确的js文件放到编译文件dest中
.pipe(browserSync.stream());
})
index.html引用编译后的文件:
<!--引用编译后的css-->
<link href="dest/index.css" rel="stylesheet" type="text/css"/>
<!--引用编译后的js-->
<script src="dest/index.js"></script>
运行编译过程(git):
$ gulp