javascript

gulp基础

gulp是为了方便前端开发的一种自动化构建工具。

简单例子

  • npm install gulp –save 作为项目开发依赖安装 或者 npm installl gulp –global gulp 全局使用
  • 创建一个gulpfile.js文件

  • gulpfile.js中写入以下代码：

    1
    2
    3
    4
    var gulp = require('gulp');
    gulp.task('default',function(){
    	console.log('我是默认任务');
    });

  • 命令行执行 gulp default or gulp

    gulp基础API

  • 载入gulp核心包

    1
    const gulp = require('gulp')

  • 定义一个任务

    1
    2
    3
    4
    gulp.task('任务名称',function(){
    	console.log('这里是任务执行体');
    });
    //命令行  $ gulp 任务名称

  • 拷贝文件

    1
    2
    3
    4
    5
    gulp.task('dest',function(){
    gulp.src('src/**/*.*')
        .pipe(gulp.dest('dist/'));
    });
    //命令行 $ gulp dest

  • 监视文件变化

    1
    2
    3
    4
    5
    gulp.task('watch',function(){
    	gulp.watch('src/*',['任务1','任务2']);
    });
    //src目录下的任何文件变化，都会触发后面跟的 任务1和任务2
    //命令行 $ gulp watch

gulp 扩展插件

gulp本身不提供任何功能，只提供最基础的API

  • gulp-less less转换为css
    gulp-less
    git：gulp-less

    1
    2
    3
    4
    5
    6
    7
    8
    9
    gulp.task('style',function(){
    return gulp.src('src/**/*.less')
                    .pipe(less())
                    .pipe(gulp.dest('dist/'));
    });
    gulp.task('watch',function(){
    	gulp.watch('src/**/*.less',['style']);
    });
    //命令行 $ gulp watch

  • gulp-connect 可以创建一个本地服务器
    gulp-connect
    git：gulp-connect

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const connect = require('gulp-connect');
    gulp.task('serve',function(){
    	connect.server({
    	    root:'public',
    	    livereload:true,
    	    port:8888
    	});
    	gulp.watch('监视的文件',['reload']);
    });
    gulp.task('reload',function(){
        gulp.src('监视的文件').pipe(connect.reload());
    });
    //命令行 $ gulp serve

图图图

1.png