npm scripts和Gulp

• 都能够是实现自动化构建
• Gulp语法简单
  • 语法就是JavaScript语法
  • npm scripts语法接近shell脚本
• Gulp生态完善，构建效率高

步骤

• 全局安装gulp客户端

npm install -g gulp-cli

• 初始化项目

npm init --yes

• 安装gulp包

npm install gulp -D

• 新建gulpfile文件(gulpfile.js)
• 创建gulp任务
• 执行gulp任务

gulp<task-name>

const gulp = require('gulp')
// 创建gulp任务
const task1 = (cd)=>{
    console.log("task1 is running")

    cd()
}

const task2 = (cd)=>{
    console.log("task2 is running")

    cd()
}
// 旧的使用方法
gulp.task("task3",(cd)=>{
    console.log("task3 is running")

    cd()
})
// 导出任务
module.exports = {
    task1,
    default: task2 //默认任务
}

Gulp组合任务

parallel并行，series串行
例子

const { task } = require("gulp");
const gulp = require("gulp")

const task1 = (cd)=>{
    setTimeout(() =>{
        console.log("task1 is running")

        cd();
    },1000)
}
const task2 = (cd)=>{
    setTimeout(() =>{
        console.log("task2 is running")
        
        cd();
    },1000)
}
const task3 = (cd)=>{
    setTimeout(() =>{
        console.log("task3 is running")
        
        cd();
    },1000)
}
// 任务的并行执行
exports.p = gulp.parallel(task1,task2,task3);

// 任务的串行执行
exports.s = gulp.series(task1,task2,task3)

Gulp文件操作

• Gulp是基于流的构建系统
  
  

// const gulp = require("gulp")
// 通过解构的方式引入函数
const { src,dest } = require("gulp")

// 声明任务
const style = ()=>{
    // 流 就是异步操作
    return src("src/style/main.less",{ base: "src" }).pipe(dest("dist"))
}

module.exports = {
    style
}

创建样式文件

gulp官网

www.gulpjs.com

处理less

https://www.npmjs.com/package/gulp-less

处理压缩

https://www.npmjs.com/package/gulp-clean-css

重命名

https://www.npmjs.com/package/gulp-rename

const { src, dest } = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const style = () =>{
    return src('src/style/main.less',{ base : 'src'})
    .pipe(less())
    .pipe(cleancss())
    .pipe(rename({"extname" : ".min.css"}))
    .pipe(dest('dist'))
}

module.exports = {
    style
}

autoprefixer(保证CSS的兼容性)

CSS hack

• CSS代码存在兼容性问题
  • 同一段CSS代码在不同的浏览器呈现的效果可能不一样
• 针对不同浏览器写相应的CSS代码
  • 这个过程，叫做CSS hack

CSS hack的目的就是让你的CSS代码能够兼容不同的浏览器

CSS hack - 属性前缀法

• user-select 属性可以控制用户是否能选中文本（存在兼容性问题）

  
  
  浏览器的CSS属性前缀

autoprefixer插件

Autoprofixer使用的是caniuse.com的数据来决定哪些属性需要加前缀

npm i install gulp-autoprefixer -D

    const autoprefixer = require('gulp-autoprefixer')

    .pipe(autoprefixer())

构建脚本文件

类似样式文件构建

所需插件

// 声明脚本构建任务
const script = () => {
    return src("src/js/main.js",{ base: 'src' })
    .pipe(babel({
        presets: ['babel-preset-env']
    }))
    .pipe(uglify())
    .pipe(rename({"extname" : ".min.js"}))
    .pipe(dest("dist"))
}

构建HTML文件

// 构建页面
const html = () => {
    return src("src/index.html")
    .pipe(htmlmin({ collapseWhitespace : true,minifyCSS:true,minifyJS:true}))
    .pipe(dest('dist'))

}

具体的参数看详细文档
html，js，css压缩没有具体的顺序，使用并行组合任务一并完成

// 使用并行执行
const build = parallel(style,script,html)
module.exports = {
    style,
    script,
    html,
    build
}

构建图片文件

依然报错的话，就删除node_module文件夹使用npm install重新下载依赖
默认进行无损压缩

// 图片构建任务
const image = () =>{
    return src('src/images/**',{base: 'src'})
    .pipe(imagemin([
        // 无参数就是无损压缩
        // 有参数，有损压缩，75％，具体的需要参考文档
        imagemin.mozjpeg({quality:75,progressive:true})
    ]))
    .pipe(dest('dist'))
}

文件清除

npm i del -D

先删后加

const clean = () =>{
    return del('dist')
}
// 使用并行执行
const build = parallel(style,script,html,image)
// 串行
const dev = series(clean,build)
module.exports = {
    dev,
    build
}

服务发布

www.browsersync.io
安装依赖

npm i browser-sync -D

// 声明服务发布的任务
const serve = () =>{
    bs.init({
        // 禁用浏览器的browserSync connected提示框
        notify:false,
        server:{
            // 指定服务启动的目录
            baseDir:'./dist'
        }
    })
}

使用Bootstrap

引入bootstrap之后，要设置一些东西：

• 在src下的index.html引入bootstrap和其依赖jQuery
• 要在browserSync下加一个路径，映射路径，才能读取

            routes:{
                '/node_modules' : 'node_modules'
            }

Reload热更新

• 第一：添加src监听
• 第二：添加dist监听

const serve = () =>{
    // watch(被监视的文件，对应的任务)
    watch('src/index.html',html)
    watch('src/style/*.less',style)
    watch('src/js/*.js',script)
    watch('src/images/**',image)
    bs.init({
        // 禁用浏览器的browserSync connected提示框
        notify:false,
        files : 'dist/**', // 监视dist下的文件的变化，浏览器实时更新

        server:{
            // 指定服务启动的目录
            baseDir:'./dist',
            routes:{
                '/node_modules' : 'node_modules'
            }
        }
    })
}