gulp--项目构建工具笔记-CSDN博客

基础架构
任务自动化gulp
编译工具babel webpack
代码实现

业务逻辑：页面、交互

自动编译：自动刷新、文件合并、资源压缩

服务接口：数据、接口

gulp（流的工作方式）在webpack上，配合webpack-stream工作。

操作

1全局安装

 npm install --global gulp复制代码

2安装开发依赖

 npm install --save-dev gulp              //实质是有一大堆，看到就加复制代码

3项目下新建gulpfile.js

gulpfile.babel.js--------------- 用es6语法写的对应用这个文件，此次工程用这个了

import requireDir from 'require-dir';

requireDir('./tasks');      //作用是将./task路径下所有文件都加载进来
复制代码

4配置文件

工程文件目录：

app
    css
    js
        class
            test.js
        index.js            //入口文件
    views
        error.ejs           //模板文件
        index.ejs           //模板文件
server 
    ...  
tasks
    util
        args.js

package.json    
.babelrc
gulpfile.babel.js复制代码

args.js------对命令行参数进行处理

import yargs from 'yargs';

const args = yargs
    .option('production', {                //判断环境
        boolean: true,
        default: false,
        describe: 'min all scripts'
    })
    .option('watch', {                     //监听文件变化
        boolean: true,
        default: false,
        describe: 'watch all files'
    })
    .option('verbose', {                   //日志处理
        boolean: true,
        default: false,
        describe: ''
    })
    .option('sourcemaps', {                //资源压缩
        describe: 'force the creation of sourcemaps'
    })
    .option('port', {                      //服务器端口
        string: true,
        default: 8080,
        describe: 'server port'
    })
    .argv

export default args
复制代码

scripts.js------对js进行处理

import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';   //
import named from 'vinyl-named';           //文件重命名标志的
import livereload from 'gulp-livereload';  //热更新
import plumber from 'gulp-plumber';        //处理文件信息流
import rename from 'gulp-rename';          //对文件啊重命名
import uglify from 'gulp-uglify';          //文件压缩
import {log, colors} from 'gulp-util';      //命令行输出的包
import args from './util/args';            //前面写的包

gulp.task('scripts', () => {
    return gulp.src(['app/js/index.js'])
        .pipe(plumber({                                    //抓错误
            errorHandle: function () {
            }
        }))
        .pipe(named())
        .pipe(gulpWebpack({                                 //webpack登场，文件编译配置
            module: {
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel'
                }]
            }
        }), null, (err, stats) => {
            log(`Finished '${colors.cyan('scripts')}'`, stats.toString({
                chunks: false
            }))
        })
        .pipe(gulp.dest('server/public/js'))                //编译生成文件地址
        .pipe(rename({                                      //新整一份文件，给命名
            basename: 'cp',
            extname: '.min.js'
        }))
        .pipe(uglify({
            compress: {properties: false},
            output: {'quote_keys': true}
        }))                   //新文件的压缩
        .pipe(gulp.dest('server/public/js'))                //新文件进行保存
        .pipe(gulpif(args.watch, livereload()))             //判断命令行watch参数，有就监听热更新
})
复制代码

pages.js------- 处理模板文件

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';          //热更新
import args from './util/args';                    //前面写的包

gulp.task('pages',()=>{
    return gulp.src('app/**/*.ejs')
        .pipe(gulp.dest('server'))                 //ejs模板文件，全部打包进server下
        .pipe(gulpif(args.watch,livereload()))
})复制代码

css.js----------处理文件

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';  //热更新
import args from './util/args';            //前面写的包

gulp.task('css',()=>{
    return gulp.src('app/**/*.css')         //app目录下所有的css
        .pipe(gulp.dest('server'))         //打包到server下
        .pipe(gulpif(args.watch,livereload()))
})复制代码

server.js----服务器脚本

import gulp from 'gulp';
import gulpif from 'gulp-if';
import liverserver from 'gulp-live-server';  //启动服务器的脚本
import args from './util/args';              //前面写的包

gulp.task('server',(cb)=>{
    if(!args.watch) return cb()

    var server = liverserver.new(['--harmony','server/bin/www']);
    server.start()
    gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],  //监听这两个路径下文件
        function(file){
            server.notify.apply(server,[file])               //通知服务器，这个文件发生了改变
        }
    )
    gulp.watch(['server/routes/**/*.js','server/app.js'],    //监听变化后,需要重启的文件
        function(){
            server.start.bind(server)()                      //重启服务
        }
    )
})复制代码

browser.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import args from './util/args';              //前面写的包

gulp.task('browser',(cb)=>{
    if(!args.watch) return cb();
    gulp.watch('app/**/*.js',['scripts']);
    gulp.watch('app/**/*.ejs',['pages']);
    gulp.watch('app/**/*.css',['css']);
});
复制代码

clean.js------清除生成的文件

import gulp from 'gulp';
import del from'del';
import args from './util/args';              //前面写的包


gulp.task('clean',()=>{
    return del(['server/public','server/views'])
});复制代码

build.js-----------开始编译，处理任务间的关联顺序

import gulp from 'gulp';
import gulpSequence from 'gulp-sequence';


gulp.task('build', gulpSequence('clean', 'css', 'pages', 'scripts',
    ['browser', 'server']          //注意顺序
));复制代码

default.js--------默认执行gulp就执行这个文件

import gulp from 'gulp';

gulp.task('default', ['build'])复制代码

.babelrc

{
  "presets":["es2015"],
  "plugins":["transform-decorators-legacy"]
}

复制代码

发车前：index.ejs文件写点东西进去占坑

发车

gulp

gulp --watch //127.0.0.1:3000 localhost:3000

注意点：

1、server目录下，执行

express -e .           //使用这个脚手架，建立以ejs为模板，加载到当前路径下
npm install            //
复制代码

2、热更新

在server下/ app.js文件中加入

//***注意要放在app.use(express.static(path.join(__dirname,'public')));  后面
app.use(require('connect-livereload')())

复制代码

空白知识点

这货到底干了啥？

express -e . 复制代码