自动化构建工具—gulp的简单配置

2022-06-20 01:41:14

　　把之前用到的gulp总结整理下，有时候说不出来的，就写出来吧，做个笔记，以后也可以慢慢补充

　　cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中，当保存到git仓库时，只需保存package.json即可

　　用到的gulp模块有：gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open

　　　　注：安装node模块是可批量安装的 cnpm i --save-dev gulp-clean gulp-concat....

　　gulp-plumber：当编译css or js时发生错误，它不会立即中断线程，而只是抛出错误

　　gulp有两个优点：

　　　　1、基于流，效率非常高简言之，把产生的中间文件放在内存中进行处理，直到最后一步才生成文件，操作文件

　　　　2、任务化，编写成一个个小任务然后合并执行任务逻辑清晰可读性好

　　gulp有两个功能很重要——压缩、合并，合并之后减少Http请求，压缩后减少带宽

　　常用的api(函数):src、dest、watch、task、pipe　　

　　　　src: 读取文件、文件夹

　　　　dest: 生成文件、写文件

　　　　watch：监控文件

　　　　task：定制任务

　　　　pipe：用流的方式处理文件

　　贴出gulpfile.js的文件编写：

//引入模块

var gulp = require('gulp');

var $ = require('gulp-load-plugins')(); //其他的gulp模块就可以直接通过$来引用，而不需再声明变量

var open = require('open');

//全部变量来定义目录路径

var app = {

    srcPath:'src/',        //源代码放置的位置

    devPath:'build/',    //整合之后的文件，开发目录

    prdPath:'dist/'        //用于生产、部署

};

//把bower下载的第三方创建拷贝到生产环境目录

gulp.task('lib',function(){

    gulp.src('bower_components/**/*.js')      //对bower_..下面的子文件进行深度遍历，读取文件

    .pipe(gulp.dest(app.devPath+'vendor'))    //操作：写文件

    .pipe(gulp.dest(app.prdPath+'vendor'))

    .pipe($.connect.reload())//构建完，刷新浏览器进行实时预览

});

gulp.task('html',function(){

    gulp.src(app.srcPath+'**/*.html')

    .pipe(gulp.dest(app.devPath))

    .pipe(gulp.dest(app.prdPath))

    .pipe($.connect.reload())

});

gulp.task('json',function(){

    gulp.src(app.srcPath+'data/**/*.json')

    .pipe(gulp.dest(app.devPath+'data'))

    .pipe(gulp.dest(app.prdPath+'data'))

    .pipe($.connect.reload())

});

gulp.task('less',function(){

    gulp.src(app.srcPath+'style/index.less')

    .pipe($.plumber()) //修复了pipe处理异常的bug，让任务执行更平滑

    .pipe($.less())

    .pipe(gulp.dest(app.devPath+'css'))

    .pipe($.cssmin())

    .pipe(gulp.dest(app.prdPath+'css'))

    .pipe($.connect.reload())

});

gulp.task('js',function(){

    gulp.src(app.srcPath+'script/**/*.js')

      .pipe($.plumber())

    .pipe($.concat('index.js'))

    .pipe(gulp.dest(app.devPath+'js'))

    .pipe($.uglify())

    .pipe(gulp.dest(app.prdPath+'js'))

    .pipe($.connect.reload())

});

gulp.task('image',function(){

    gulp.src(app.srcPath+'image/**/*')

    .pipe($.plumber())

    .pipe(gulp.dest(app.devPath+'image'))

    .pipe($.imagemin())

    .pipe(gulp.dest(app.prdPath+'image'))

    .pipe($.connect.reload());

});

gulp.task('build',['image','js','less','json','html','lib']);

//每次发布的时候，把之前的目录清除，避免旧的文件对当前项目造成影响

gulp.task('clean',function(){  //构架任务

    gulp.src([app.devPath, app.prdPath])

    .pipe($.clean());

});

//编写个服务器

gulp.task('serve',['build'],function(){

    $.connect.server({

        root:[app.devPath],

        livereload:true,    //适用于高级浏览器，自动刷新浏览器，ie就不支持

        port:1234

    });

    open('http://localhost:1234');

    //自动构建

    gulp.watch('bower_components/**/*',['lib']);

    gulp.watch(app.srcPath+'**/*',['html']);

    gulp.watch(app.srcPath+'data/**/*',['json']);

    gulp.watch(app.srcPath+'style/**/*',['less']);

    gulp.watch(app.srcPath+'script/**/*',['js']);

});

gulp.task('default',['serve'])

码农公寓

相关文章