1、gulp安装
需要全局安装:npm install gulp -g
还需要本地安装,在项目目录中:npm install gulp --save
2、gulp使用
- 在项目目录中新建1个
gulpfile.js
文件. - 在这个文件中写上构建代码.
gulp-uglify 压缩js
压缩混淆js代码,需要gulp-uglify
插件支持.使用npm安装该插件 npm install gulp-uglify
// 获取 gulp var gulp = require(‘gulp‘); // 获取 uglify 模块(用于压缩 JS) var uglify = require(‘gulp-uglify‘); // 压缩 js 文件 // 在命令行使用 gulp script 启动此任务 gulp.task(‘jscompress‘, function() { // 1. 找到文件 return gulp.src(‘js/cart.js‘) // 2. 压缩文件 .pipe(uglify({ mangle:true })) // 3. 另存压缩后的文件 .pipe(gulp.dest(‘dist/js‘)); });
压缩CSS
需要gulp-cssmin
插件支持.使用npm安装该插件 npm install gulp-cssmin
var cssmin = require("gulp-cssmin"); gulp.task("csscompress",function () { //1.这个任务是用来压缩css的. // 那么首先你需要指定需要压缩的css文件 // 调用gulp对象的src方法,指定要处理的文件的路径. gulp.src("css/ershou.css") .pipe(cssmin()) .pipe(gulp.dest("dist/css")); //2.pipe()管道理解 阀门形象理解. //3.管道中每一个阀门做不同的事情.不同的事情需要插件来完成. // 压缩css的插件. gulp-cssmin // 安装插件,引入gulp-cssmin // 引入后,其实1个函数. // 将其在管道中调用,相当于在管道中设置了1个阀门. //4.管道最后1关,要调用gulp对象的dest方法,设置存放处理后的路径. });
执行命令:
gulp csscompress gulp jscompress
原文地址:https://www.cnblogs.com/winstonsias/p/11572285.html
时间: 2024-10-09 15:14:29