一：安装命令

安装全局 Gulp

npm install -g gulp


安装项目中使用的 Gulp

npm install --save-dev gulp


安装 Gulp 上 Babel 的插件

npm install --save-dev gulp-babel


安装 Babel 上将 ES6 转换成 ES5 的插件

npm install --save-dev babel-preset-es2015



安装 Gulp 上 uglify 压缩插件

npm install --save-dev gulp-uglify

 

安装gulp 上css 压缩

npm install --save-dev gulp-minify-css

二：在项目更目录新建.babelrc文件

{ "presets":["@babel/env"],"plugins": []}

三：**在项目根目录新建 gulpfile.js，内容为：

blog.csdn.net/guang_s/art…

// 引入 gulp及组件
var gulp=require('gulp'),  //gulp基础库
    minifycss=require('gulp-minify-css'),   //css压缩
    babel=require('gulp-babel'),
    uglify=require('gulp-uglify');   //js压缩


 
//css处理
gulp.task('minify-css',function(){
  return gulp.src('./Public/static/css/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./Public/static/min/css'));
});

// 压缩js

 gulp.task('minify-js', function () {
  return gulp.src('./Public/static/js/*.js')
  //es6转es5
  .pipe(babel({ "presets":["@babel/env"],"plugins": []}).on('error', function(ev){
		console.log('babel',ev);
	 }))
	.pipe(uglify().on('error', function(e){
		console.log('uglify',e);
	 }))
	.pipe(gulp.dest('./Public/static/min/js')) //压缩后的路径
});

遇见报错问题

Cannot find module '@babel/core

最近升级了系统的node ,webpack 等等，然后今天打开项目，突然启动不起来了~~

方案一：（尝试过后对我的项目没有用）

package.json中devDependencies对象添加

  "@babel/compat-data": "7.9.0"

方案二：执行下面命令，然后再重新启动

npm install -D babel-loader @babel/core @babel/preset-env webpack

拓展 npm -save 和-save-dev秒懂

我们在使用 npm install 安装模块的模块的时候，一般会使用下面这几种命令形式： npm ``install moduleName ``# 安装模块到项目目录下

npm ``install -g moduleName ``# -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

npm ``install -save moduleName ``# -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm ``install -save-dev moduleName ``# -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

npm install moduleName 命令

安装模块到项目node_modules目录下。\
不会将模块依赖写入devDependencies或dependencies 节点。\
运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

安装模块到全局，不会在项目node_modules目录中保存模块包。\
不会将模块依赖写入devDependencies或dependencies 节点。\
运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

安装模块到项目node_modules目录下。\
会将模块依赖写入dependencies 节点。\
运行 npm install 初始化项目时，会将模块下载到项目目录下。\
运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

安装模块到项目node_modules目录下。\
会将模块依赖写入devDependencies 节点。\
运行 npm install 初始化项目时，会将模块下载到项目目录下。\
运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装

glup 打包压缩js ,css