gulp构建自动化项目

Posted 2020-10-23 sklhtml

‘use strict‘;
var gulp = require(‘gulp‘),
    browserSync = require(‘browser-sync‘).create(),
    SSI = require(‘browsersync-ssi‘),//多浏览器多设备同步&自动刷新
    concat = require(‘gulp-concat‘),//整合文件
    uglify = require(‘gulp-uglify‘), //混淆js   暂时没用到
    minify = require(‘gulp-minify‘), //压缩js
    plumber = require(‘gulp-plumber‘),//错误处理插件plumber
    compass = require(‘gulp-compass‘),    //compass 用来编译sass
    imagemin = require(‘gulp-imagemin‘),//压缩图片
    clean = require(‘gulp-clean‘), //clean 用来删除文件
    zip = require(‘gulp-zip‘),//压缩文件
    runSequence = require(‘gulp-run-sequence‘);//控制task中的串行和并行。这个很重要，它能够严格规定task的执行顺序，否则gulp默认并行，有些时候会产生问题。如先清空再重建文件，可能重建过程中又清空了。

//创建一个名为serve的任务，该任务的内容就是匿名函数中的内容。
gulp.task(‘serve‘, function () {
    //使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）
    browserSync.init({
        server: {
            baseDir: ["./dist"],
            middleware: SSI({
                baseDir: ‘./dist‘,
                ext: ‘.shtml‘,
                version: ‘2.10.0‘
            })
        }
    });
    //监听各个目录的文件，如果有变动则执行相应的任务操作文件
    gulp.watch("app/sass/*.scss", [‘compass‘]);
    gulp.watch("app/script/*.js", [‘js‘]);
    gulp.watch("app/**/*.html", [‘html‘]);
    gulp.watch("app/img/**/*.*", [‘img‘])
    gulp.watch("app/font/*", [‘font‘])
    //如果有任何文件变动，自动刷新浏览器
    gulp.watch("dist/**/*.html").on("change", browserSync.reload);
});

//compass任务，将scss编译为css
gulp.task(‘compass‘, function () {
    //首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）
    return gulp.src(‘app/sass/*.scss‘)
        .pipe(compass({
            //设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试
            sourcemap: ‘true‘,
            //输出格式设置为compressed就不需要压缩css了
            style: ‘compressed‘,
            //文件目录
            css: ‘dist/css‘,
            sass: ‘app/sass‘,
            image: ‘app/images‘
        }))
        //如果有错误输出错误提示
        .on(‘error‘, function (error) {
            // Would like to catch the error here
            console.log(error);
            this.emit(‘end‘);
        })
        //编译后的文件放入dist/stylesheets下
        .pipe(gulp.dest(‘dist/css‘))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});

//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task(‘js‘, function () {
    //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）
    return gulp.src(‘app/script/*.js‘)
    //错误管理模块
        .pipe(plumber())
        //目前没用混淆，不方便调试
        //.pipe(uglify())
        //js压缩
        .pipe(minify())
        //输出到dist/javascript
        .pipe(gulp.dest("dist/js"))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});



//html任务，目前什么都没做。只是单纯的把所有html从开发环境app复制到测试环境dist
gulp.task(‘html‘, function () {
    return gulp.src("app/*.html")
        .pipe(plumber())
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

// 处理图片
gulp.task(‘img‘, function(){
    return gulp.src(‘app/img/**/*.*‘)
        .pipe(imagemin())
        .pipe(gulp.dest(‘dist/img‘))
        .pipe(browserSync.stream());
});

//publish任务，需要的时候手动执行，将dist中的文件打包压缩放到release中。
gulp.task(‘publish‘, function () {
    //取得dist文件夹中的所有文件
    return gulp.src(‘dist/**/*‘)
    //错误处理模块
        .pipe(plumber())
        //压缩成名为publish.zip的文件
        .pipe(zip(‘publish.zip‘))
        //放入release文件夹
        .pipe(gulp.dest(‘release‘))
});

//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task(‘font‘, function () {
    //首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）
    return gulp.src(‘app/font/*‘)
    //错误管理模块
        .pipe(plumber())
        //输出到dist/javascript
        .pipe(gulp.dest("dist/font"))
        //自动刷新浏览器
        .pipe(browserSync.stream());
});


//clean任务：清空dist文件夹，下边重建dist的时候使用
gulp.task(‘clean‘, function () {
    return gulp.src(‘dist/*‘, {read: false})
        .pipe(clean());
});

//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件
gulp.task(‘redist‘, function () {
    //先运行clean，然后并行运行html,js,compass
    runSequence(‘clean‘, [‘html‘, ‘js‘, ‘img‘,‘compass‘,‘font‘]);
});

//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会
gulp.task(‘default‘, function () {
    //先运行redist，启动服务器
    runSequence(‘redist‘, ‘serve‘);
});

构建初始化项目

npm init

全局安装依赖gulp

npm install gulp -g 

安装依赖

npm install browser-sync  browsersync-ssi gulp gulp-clean gulp-compass gulp-concat gulp-imagemin gulp-minify gulp-minify-css gulp-plumber gulp-run-sequence gulp-sass gulp-uglify gulp-zip plumber --save

按照上图给的目录：构建

dist的文件中的所有都是通过gulp生成，无需操作，只需操作app文件中的就可以。