gulp如何打包css、sass编译、自动加css前缀、js压缩、es6转换es5

目录介绍和基础依赖

1、 最开始，当然要先安装node和npm，然后新建自己的项目（ps：项目名不能是‘gulp’），然后初始化一下：npm init -y 生成packge.json
复制代码

2、首先我们来看一下项目的目录结构

1、安装gulp

在你的项目目录下打开命令行界面
首先要全局安装一下gulp，输入：
npm i -g gulp
然后，要把gulp安装到本地：
npm i -D gulp
复制代码

2、新建打包文件以及需要的依赖，依赖安装请按照在开发环境中 packjson.js 下面的 devDependencies

//用于sass转换成css文件
    //需要的依赖
    npm install --save-dev gulp-ruby-sass
    //引入方式
    var sass = require('gulp-ruby-sass')
//新建一个‘sass’任务  
gulp.task('sass', function () {
    return sass('app/mediaAdmin/static/css/**/*.scss')//编译文件
        .on('error', sass.logError)//错误信息
        .pipe(gulp.dest('app/mediaAdmin/static/css'));输出路径
});

复制代码

//用于css自动加css前缀
    //需要的依赖，其他本地计算机必须要用sass环境第三方链接：https://www.sass.hk/，
    npm install -g pump
    npm install --save-dev gulp-autoprefixer
    //引入方式
    var pump=require('pump'); //调用pump软件,理解为管道,队列?一种容器?
    var prefixer=require('gulp-autoprefixer'); //调用gulp-autoprefixer插件,为自动化处理css前缀的.
//新建一个‘prefixer’任务  
gulp.task('prefixer', function (cb) {
    pump([
        gulp.src('app/mediaAdmin/static/css/**/*.css'),
        prefixer({
            borwsers: ['last 1 version', '> 1%', 'maintained node versions', 'not dead'],
            cascade: true,
            remove: true
        }), gulp.dest('app/mediaAdmin/static/dist/css')
    ], cb);
});

复制代码

//用于压缩css文件
    //需要依赖
    npm install --save-dev gulp-minify-css
    //引入方式
    var minifyCSS = require('gulp-minify-css');
//新建一个‘css’任务  
gulp.task('css',function(){
    gulp.src('app/mediaAdmin/static/dist/css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/mediaAdmin/static/css'));
});
复制代码

//用于js es6转es5文件，并且压缩js代码
    //需要依赖
    npm install --save-dev gulp-babel //es6转es5
    npm install --save-dev gulp-uglify //js压缩
    引入方式
    var uglify = require('gulp-uglify');   用于压缩js文件
    var minifyCSS = require('gulp-minify-css');   用于压缩css文件
//新建一个‘script’任务  
gulp.task('script', function () {
    //找到文件
    gulp.src('app/mediaAdmin/static/js/**/*.js')
    //把ES6代码转成ES5代码
        .pipe(babel())
        //压缩文件
        //.pipe(uglify())
        //另存压缩后文件
        .pipe(gulp.dest('app/mediaAdmin/static/dist/js'));
});
//备注如何按照过程中有错误提示 babel-core这个依赖
    只能手动更改，下载babel-core依赖，和改变引入方式
复制代码

//监听文件，当文件被修改后自动执行压缩任务
gulp.task('auto', function () {
    //第一个参数：监听的目标文件
    //第二个参数：监听到修改后执行的压缩任务
    gulp.watch('app/mediaTv/static/js/**/*.js', ['script']);
    gulp.watch('app/mediaTv/static/css/**/*.scss', ['sass']);
    gulp.watch('app/mediaTv/static/images/**/*.*', ['images']);
    gulp.watch('app/mediaTv/static/css/**/*.css', ['prefixer']);
});

//定义默认任务,使用gulp 启动数组里的所有任务
gulp.task('default', ['script', 'sass','images', 'prefixer', 'auto']);
复制代码

转载于:https://juejin.im/post/5c0a2312e51d455b3d3dbed7