gulp的配置文件

最新推荐文章于 2022-07-01 22:16:49 发布

weixin_41779718

最新推荐文章于 2022-07-01 22:16:49 发布

阅读量135

点赞数

分类专栏： gulp

本文链接：https://blog.csdn.net/weixin_41779718/article/details/104455822

版权

gulp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

const gulp = require('gulp');
const less = require('gulp-less');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
const connect = require('gulp-connect');
const px2rem = require('gulp-px2rem-plugin');

gulp.task('less', function(done) {
  return gulp.src('src/css/**/*.less')
        .pipe(less())
        .pipe(autoprefixer({
            overrideBrowserslist:['> 1%', 'Firefox >= 10', 'ie >= 9', 'iOS >= 4', 'Chrome >= 10'], // 重要配置
            cascade: false //  是否美化属性值
        }))
        // .pipe(px2rem())
        .pipe(rename({ suffix: '.min' })) // .css前加前缀.min
        .pipe(gulp.dest('dist/style'))
        .pipe(connect.reload());
        done()
});
// gulp.task('scss', function(done) {
//     return sass('src/css/**/*.scss')
//             .on('error', sass.logError)
//             .pipe(autoprefixer())
//             .pipe(rename({ suffix: '.min' })) // .css前加前缀.min
//             .pipe(gulp.dest('dist/style'))
//             .pipe(connect.reload());
//             done()
//   });
gulp.task('cass', function(done) {
    return gulp.src('src/css/**/*.css')
          .pipe(rename({ suffix: '.min' })) // .css前加前缀.min
          .pipe(gulp.dest('dist/style'))
          .pipe(connect.reload());
          done()
  });
gulp.task('html',function(done){
    return gulp.src('./src/*.html')
        .pipe(gulp.dest('dist/')) // 生成静态文件
        .pipe(connect.reload());    // 刷新浏览器
        done()
})
gulp.task('js',function(done){
    return gulp.src('./src/js/**/*')
        .pipe(gulp.dest('dist/js/'))
        .pipe(connect.reload());
        done()
});
gulp.task('images',function(done){
    return gulp.src('./src/images/**/*')
        .pipe(gulp.dest('dist/images/'))
        .pipe(connect.reload());
        done()
});
// 在命令行使用 gulp watch 启动此任务
gulp.task('watch', function () {
    // 监听文件修改，当文件被修改则执行 html 任务
    gulp.watch('./src/js/**/*.js', gulp.series('js') );
    gulp.watch('./src/css/**/*.less', gulp.series('less'));
    gulp.watch('./src/css/**/*.css', gulp.series('cass'));
    // gulp.watch('./src/css/**/*.scss', gulp.series('scss'));
    gulp.watch('./src/images/**/*', gulp.series('images'));
    gulp.watch('./src/*.html', gulp.series('html') ); // gulp4.0任务统一使用回调函数，不再支持 ['html'] 这种形式
})


gulp.task('webserver', function() {
    connect.server({
        root: './dist/',
        livereload: true,// 自动刷新
        port: 2333,
        host: '::'
    });
});

gulp.task('default',gulp.parallel('less','js','html','webserver','watch','images','cass'));//并行执行
// gulp.task('default',gulp.series('styles','scripts'));//按顺序执行

package.js 文件

{
  "name": "aaaa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-connect": "^5.7.0",
    "gulp-less": "^4.0.1",
    "gulp-px2rem-plugin": "^0.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-ruby-sass": "^4.0.0"
  },
  "browserslist": [
    "defaults",
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ios > 7"
  ],
  "dependencies": {
    "gulp": "^4.0.2"
  }
}