gulp

gulp构建工具

1.安装

• 1.全局安装glup

    // 只需要执行一次
    npm install -g gulp
  

• 2.查看安装是否完成

    gulp -v
  

2.任务清单

- src 开发路径
- build 运行路径
- dist 发布路径

• 1.创建gulpfile.js文件

• 2.在gulpfile.js当中定义任务

    // 在引入模块之前需要本地安装 npm install gulp
    // 1.引入模块
    var gulp = require('gulp');
    // 2.定义路径 src 开发路径 build运行路径 dist发布路径
    var appPath = {
        // 提前声明好一些常量
        src:'src/',
        build:'build/',
        dist:'dist/'
    };
    //3.任务清单把所有的src下面的html分别构建到build中和dist中
    gulp.task('move',function () {
        // 1.告诉gulp要操作那些文件
        gulp.src(appPath.src + '**/*.html')
            .pipe(gulp.dest(appPath.build))
            .pipe(gulp.dest(appPath.dist));
    });
  

ps: dest()代表需要把src里面的文件放入到那个目录下面

• 3.执行任务 gulp move a.在命令行中执行 b.在webStrom的命令行中执行

• 4.npm install gulp-less 下载less编译插件

• 5.npm install gulp-cssmin 下载css压缩插件

• 6.npm install gulp-concat 下载js合并插件

• 7.npm install gulp-uglify js压缩插件

• 7.less编译

    // less编译
    gulp.task('less',function () {
    gulp.src(appPath.src + 'style/index.less')
        .pipe(less())
        .pipe(gulp.dest(appPath.build + 'css'))
        .pipe(cssmin())
        .pipe(gulp.dest(appPath.dist + 'css'));
    });
  

• 8.js压缩

    // js压缩
    gulp.task('js',function () {
       gulp.src(appPath.src + '**/*.js')
           .pipe(concat('index.js'))
           .pipe(gulp.dest(appPath.build + 'js'))
           .pipe(uglify())
           .pipe(gulp.dest(appPath.dist + 'js'));
    });
  

gulp项目构建

• 1.生成package.json文件 npm init -f
• 2.上传的时候不需要上传 node_modules文件夹下的所有文件,但是package.json这个文件必须要,如果别人想要插件只需要执行npm install即可,就会下载所有的相关的插件