gulp
基于node的自动化构建工具
开发的时候分为2个阶段
开发阶段：源文件进行开发
部署阶段：源文件会被压缩，合并，优化。
gulp的用处？
1 自动压缩JS文件
安装gulp.
1、全局安装gulp npm install gulp -g
删除gulp npm unintsall gulp
由于网络经常不好，考虑把npm换成cnpm，可以使用淘宝提供的镜像服务器
下载一个淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm是国内的会快 npm比较慢
2、 npm init 把你的项目变成一个node包 npm init -y（出现package.json）
3、局部安装gulp cnpm install gulp --save-dev
save把文件放在node_modules里面
dev 文件在package.json里面显示
4、创建一个gulpfile.js这个文件 必须跟package.json是同一路径
安装依赖包
压缩image文件：gulp-imagemin
压缩JS文件：gulp-uglify
压缩js文件时候存在ES6 需要转译
另外安装依赖包为：babel-core babel-preset-env babel-preset-env gulp-babel
压缩CSS文件：gulp-minify-css
压缩html文件：gulp-minify-html
合并文件：gulp-concat
开启服务器：gulp-connect
自刷新：gulp-livereload
package.json(该文件基本配置直接cnpm install安装全部依赖包)
{ "name": "gulp", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "gulp": "^3.9.1", "gulp-babel": "^7.0.1", "gulp-concat": "^2.6.1", "gulp-connect": "^5.5.0", "gulp-imagemin": "^4.1.0", "gulp-minify-html": "^1.0.6", "gulp-sass-china": "^3.1.0", "gulp-uglify": "^3.0.0" } }
gulpfile.js配置
const gulp=require('gulp'); //压缩页面 const minHtml=require('gulp-minify-html'); gulp.task('minHtml',()=>{ gulp.src('src/html/*') .pipe(minHtml()) .pipe(gulp.dest('dist/html')) //自刷新的指向发生改变 .pipe(connect.reload()) }) //压缩图片 const minImg=require('gulp-imagemin'); gulp.task('minImg',()=>{ gulp.src('src/img/*') // gulp(minImg()) .pipe(gulp.dest('dist/img')) }) // 压缩JS const minJs=require('gulp-uglify'); //将ES6转译为ES5 const babel=require('gulp-babel'); //合并 const concat=require('gulp-concat'); gulp.task('minJs',()=>{ gulp.src('src/js/*') .pipe(babel({ presets:['env'] })) .pipe(minJs()) .pipe(concat('index.js')) .pipe(gulp.dest('dist/js')) }) //压缩css或者sass const minCss=require('gulp-sass-china') gulp.task('minCss',()=>{ gulp.src('src/sass/*.{scss,sass}') .pipe(minCss({ outputStyle:'compressed' })) .pipe(concat('index.css')) .pipe(gulp.dest('dist/css')) }) // 开启服务器 const connect=require('gulp-connect') gulp.task('server',()=>{ connect.server({ root:'./', port:1314, livereload:true }) }) // 监听 //当文件发生改变的时候监听所有 gulp.task('watch',()=>{ gulp.watch(['src/**/*'],['minCss','minJs','minHtml']) }) gulp.task('f5',["server","watch"])
requireJs模块化开发
1.首先引入requireJs模块（require.js文件）
async属性表明这个文件需要异步加载， IE不支持该属性，只支持defer所以把defer也写上
data-main：用于加载入口文件（当require加载完毕后，需要引进主模块js文件）
<script src='../js/require.js' defer async='true' data-main='../js/app'></script>
2.使用require.config方法配置各个模块所加载的路径
// 为了避免过多的代码写在一个数组里面导致代码的冗长 (改模块名为config.js) // 因此以下为单独配置模块路径 require.config({ //公共路径 baseUrl:'../js', paths:{ // AMD规范的模块 val为文件名 jquery:"jquery-1.11.3.min", banner:"banner", }, shim:{ // 不是按照AMD规范 的模块key为文件名 highcharts:{ exports:"Highcharts" } } })
3.配置所需要用到的模块
//因为requireJS 采用的是AMD规范因此所有依赖的模块必须用define来定义（此例模块名为banner.js） define(['jquery'],()=>{ fn(){} return { start:fn } })
4.配置主模块（核心模块）
//主模块 引入依赖的配置文件 模块名为app.js require(['config'],()=>{ // 异步引入依赖的文件 require(['banner','highcharts'],(banner,his)=>{ banner.start.init() console.log(his) }) })
webpack(模块化打包工具)
webpack:模块打包器
1、第一步全局安装webpack npm install webpack@3.5.3 -g
查看是否安装 -v
2、第二步局部安装webpack cnpm install webpack@3.5.5 --save-dev
新建一个文件webpack.config.js
检测输出：代码console.log() 命令行：node webpack.config.js
命令行创建文件:mkdir
ES6模块（需要在webpack上运行）
export:导出模块
import：引入模块
（JS文件导出后引入需要借助webpack环境）
webpack.config.js文件
const webpack=require('webpack')
module.exports = {
entry :__dirname+'/dist/js/indexa.js',
output : {
filename :'index.js',
path :__dirname+'/dist/js'
}
}