介绍一下webpack和gulp以及项目中的具体使用
- 现今的很多网页其实可以看做是功能丰富的应用,它们拥有复杂的javascript代码和一大堆依赖包,为了简化开发的复杂度,有很多实践方法
- 模块化:将复杂的程序细化为小的文件
- 类似于typescript这种在js基础上拓展的开发语言,可以简化我们的开发,并且之后可以用bable等工具将其转化成为js即浏览器认识的语言
- Sass,less等css预处理器
- webpack是模块打包机,它做的事情是分析你的项目结构,找到js模块以及其他的一些浏览器不能直接运行的语言,并将其打包为合适的格式供浏览器使用
Babel
- 编译js的平台,可以使用下一代的es6和es7
- 使用基于js拓展的语言,如 react的JSX
模块组织的几种方法
- 通过书写在不同文件中,使用script标签进行加载
- common.js node.js使用的就是这种方式
- amd进行加载 require.js使用这种模式
- es6模块
webpack
webpack的特点
- 丰富的插件方便进行工作
- 大量的加载器,包括加载各种静态资源
- 代码分割,提供按需加载的能力
- 发布工具
webpack的优势
- webpack是以commonjs的形式来书写脚本 但对amd和cmd也支持全面,方便旧项目进行代码迁移
- 能被模块化的不仅仅是js了
- 开发便捷 能替代部分grunt和gulp的工作 比如打包 压缩 图片转base64
- 扩展性强 插件机制完善
webpack的属性值
- entry 入口文件
- output:定义构建后的输出文件
- module:loaders加载各种资源
- reslove resolve属性中的extensions数组用于配置程序中可以自行补全哪些文件后缀
- plugin 提供了丰富的组件来满足不同的需求
- externals 当我们想在项目中require一些其他的类库或者api 而又不想让这些类库的源码被构建到运行时文件中
- context
Grunt
配置gruntfile.js
module.exports = function () {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
});
grunt.registerTask('default', []);
}
grunt插件介绍
- contrib-jshint js语法错误勘察
- contrib-watch 实时监控文件变化 调用相应的任务重新执行
- contrib-clean
- contrib-copy
- contrib-concat
- karma 前端自动化测试化工具
uglify 插件
uglify: {
options: {
stripBanner: true,
banner:
},
build: {
src:
dest
}
}
在initConfig之后
grunt.loadNpmTasks('grunt-contrib-ugify');
grunt.registerTask('default','ugify');
- banner: 即在生成的压缩文件第一行加一句话说明,pkg可以获得package.json的内容
- build: 配置了源文件和压缩文件,即规定了要压缩谁 压缩之后生成谁
jshint
jshint: {
build: ['Gruntfile.js', 'src/*.js'],
options: {
jshintrc: '.jshintrc'
}
}
使用watch插件
watch: {
build: {
files: ['src/*.js', 'src/*.css'],
tasks: ['jshint', 'uglify'],
options: {spawn: false}
}
}
gulp
gulpfile.js
var gulp = require('gulp')
var less = require('gulp-less')
gulp.task('testLess', function () {
gulp.src=('src/less/index.less')
.pip(less())
.pip(gulp.dest('src/css'))
});
gulp.task('default', ['watch'], function () {
gulp.watch('sass/*.scss',['sass']);
});
gulp常用插件
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
gulp.task('rename', function () {
gulp.src('src/**/*.js')
.pipe(uglify())
.pipe(rename('idnex.min.js'))
.pipe(gulp.dest('build/js');
});
gulp.task('default', ['rename']);
var minifyHtml = require('gulp-minify-html');
gulp.task('minify-html', function () {
gulp.src('src/**/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('build'))
});
var concat = require('gulp-concat');
gulp.task('concat', function () {
gulp.src('src/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest('build/js'))
});
var gulp = require('gulp'),
var less= require("gulp-less");
gulp.task('compile-less',function() {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('build/css'));
});
gulp.task('default',['compile-less']);