gulp/requireJS/webpack 前端自动化工具

gulp

基于node的自动化构建工具

开发的时候分为2个阶段

　　开发阶段：源文件进行开发

　　部署阶段：源文件会被压缩，合并，优化。

gulp的用处？

1  自动压缩JS文件

2  自动压缩CSS文件

3  自动合并文件

4  自动编译sass

5  自动压缩图片

6  自动刷新浏览器

 

 

安装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'
}
}