目录介绍和基础依赖

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']);复制代码