gulp构建工作流

Posted 2020-10-27 ccvtt

gulp构建工作流以及gulpfile.js文件

### 步骤：
1. 命令行创建npm的配置文件
    a. npm init（这时候生成一个package.json的文件）
2. 添加一个gulp的依赖
    npm install gulp --save-dev 
3. 在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的

4. 在gulpfile中抽象我们需要做的任务
    需要做的任务有：1. LESS编译 压缩 合并
                    2. JS合并 压缩 混淆
                    3. img复制
                    4. html压缩
    这个时候要在src中写源文件，写完之后要将这些源文件发布到dist目录中
5. 添加less的编译需要插件，所以要在根目录下安装
    npm install gulp-less gulp-concat gulp-uglify gulp-cssnano gulp-htmlmin --save-dev
    （其中包括的功能有less编译，压缩合并，js合并压缩混淆，img复制）
    包下载好之后要将包导入
6.  启用自动化同步服务器的功能
    npm install browser-sync --save-dev 
7.完整的gulpfile.js文件代码

        ‘use strict‘;
        /**
         * 1. LESS编译 压缩 合并
         * 2. JS合并 压缩 混淆
         * 3. img复制
         * 4. html压缩
         */
        
        // 在gulpfile中先载入gulp包，因为这个包提供了一些API
        var gulp = require(‘gulp‘);
        var less = require(‘gulp-less‘);
        var cssnano = require(‘gulp-cssnano‘);
        
        // 1. LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包
        gulp.task(‘style‘, function() {
          // 这里是在执行style任务时自动执行的
          gulp.src([‘src/styles/*.less‘, ‘!src/styles/_*.less‘])
            .pipe(less())
            .pipe(cssnano())
            .pipe(gulp.dest(‘dist/styles‘)) //这里不用写styles文件夹，会自动创建
            .pipe(browserSync.reload({
              stream: true
            }));
        });
        
        var concat = require(‘gulp-concat‘);
        var uglify = require(‘gulp-uglify‘);
        
        // 2. JS合并 压缩混淆
        gulp.task(‘script‘, function() {
          gulp.src(‘src/scripts/*.js‘)
            .pipe(concat(‘all.js‘))
            .pipe(uglify())
            .pipe(gulp.dest(‘dist/scripts‘))
            .pipe(browserSync.reload({
              stream: true
            }));
        });
        
        // 3. 图片复制
        gulp.task(‘image‘, function() {
          gulp.src(‘src/images/*.*‘)
            .pipe(gulp.dest(‘dist/images‘))
            .pipe(browserSync.reload({
              stream: true
            }));
        });
        
        var htmlmin = require(‘gulp-htmlmin‘);
        // 4. HTML
        gulp.task(‘html‘, function() {
          gulp.src(‘src/*.html‘)
            .pipe(htmlmin({
              collapseWhitespace: true,
              removeComments: true
            }))
            .pipe(gulp.dest(‘dist‘))
            .pipe(browserSync.reload({
              stream: true
            }));
        });
        
        var browserSync = require(‘browser-sync‘);
        gulp.task(‘serve‘, function() {
          browserSync({
            server: {
              baseDir: [‘dist‘]
            },
          }, function(err, bs) {
            console.log(bs.options.getIn(["urls", "local"]));
          });
        
          gulp.watch(‘src/styles/*.less‘,[‘style‘]);
          gulp.watch(‘src/scripts/*.js‘,[‘script‘]);
          gulp.watch(‘src/images/*.*‘,[‘image‘]);
          gulp.watch(‘src/*.html‘,[‘html‘]);
        });