gulp工程化环境搭建

工程化所需的环境

1. Node.js 诞生， 带来了JS操作文件系统等系统API的可能性
2. 有一些人在Node.js环境中开发了很多有助于前端开发的工具
3. 所以目前前端开发的工程化工具都是基于Node.js且运行于Node.js环境中

工程化所需的工具

1. 版本管理工具
   GitHub、SVN…
2. 工程化框架性工具
   gulp、webpack
3. 包管理工具
   npm、cnpm、yarn、bower…

搭建一个前端项目的工程化环境

选址 - 建立项目开发目录

src:开发目录

开发目录下存放开发时所需的目录：
JavaScript：存放js文件
stylesheet：存放css、sass等样式文件
static：存放引入的静态资源文件

index.html:站点的首页
dist目录
输出目录（上线目录）
config目录
配置全局环境

立项 - npm init -> package.json

生成package.josn文件

1. 包含了整个相关的介绍
   
2. 描述了项目开发时候使用的依赖
3. 创建npm scripts快捷方式

配置框架性工具

一. 下载gulp (全局和本地)

命令： npm install gulp --global / yarn add gulp global

1. 在全局安装gulp是为了全局的能使用到gulp命令
2. 本地安装gulp是为了在环境搭建时引入gulp

二. 创建gulpfile.js文件，承载任务

    const gulp = require('gulp')//引入gulp模块
    const { path } = require('./config')//引入自定义的config模块
    
    
    //迁移HTML文件
    //将src目录中的html文件复制到dist目录中
    gulp.task('copy-html', () => {
        let { src,dist } = path;
        return gulp.src(src + '/*.html')
                .pipe(gulp.dest(dist))
    })
    
    //迁移static文件
    //将src目录中的static目录以及其子目录复制到dist目录中
    gulp.task('copy-static', () => {
        let { static,dist } = path;
        return gulp.src(static + '/**/*')
                .pipe(gulp.dest(dist + '/static'))
    })
    
    //监听HTML文件
    //监听src目录中HTML文件的变化，并将变化实时同步给dist目录中的HTML文件
    gulp.task('watch', () => {
        let { src } = path;
        gulp.watch(src + '/*.html',['copy-html'])
    })
    
    //将配置好的方法放到默认任务中统一执行中，以便操作
    gulp.task('default', ['copy-static', 'copy-html', 'watch'], () => console.log('gulp'))

四、 准备创建开发服务器 gulp-webserver

安装gulp-webserver：npm install gulp-webserver -D

配置gulp-webserver

详情api见下链接
gulp-webserverAPI

五、 处理sass编译环境

安装gulp-sass：npm install gulp-sass -D

六、利用gulp-watch监听static文件夹中文件的变化，然后重新输入到dist中

安装gulp-watch：npm install gulp-watch -D

watch(src + '/static/**/*', (v) => {
        if ( v.event === 'unlink' ) { // 如果是删除文件
            // 将dist/static中的对应文件也删掉
            let _path = Path.resolve(dist + '/static/', v.path.split('\\static\\')[1])
            del(_path) // 删除
        } else {
            gulp.start(['copy-static']) // 执行复制静态文件的任务
        }
    })

七、利用webpack-stream(gulp-webpack)工具实现js模块化

安装webpack-stream：npm install webpack-stream -D

// 处理JS文件
gulp.task('pack-js', () => {
    let { src, dist } = path
    return gulp.src(src + '/stylesheets/**/*.js')
            .pipe(webpack(webpackConfig))
            .pipe(gulp.dest(dist + '/javascripts'))
})

gulp开发环境搭建基本完成