ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] 先安装nodejs http://nodejs.cn/ 使用gulpjs压缩css,js 文件和合并。 中文网站: https://www.gulpjs.com.cn/ #### **gulpjs安装** #### 1. 全局安装 gulp: $ npm install --global gulp 或者 $ npm install --g gulp #### 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp #### 3. 安装用来压缩js文件的插件 $ npm install --save-dev gulp-uglify #### 4. 安装用来压缩css文件的插件 $ npm install --save-dev gulp-minify-css #### 5. 安装用来合并文件的插件 $ npm install --save-dev gulp-concat #### 6. 安装用来检查js代码错误的插件 $ npm install --save-dev gulp-jshint #### 7. 安装用来重命名的插件 $ npm install --save-dev gulp-rename #### 8. 一起来安装插件 $ npm install --save-dev gulp-uglify gulp-minify-css gulp-concat gulp-jshint gulp-rename #### 9. 在项目根目录下创建一个名为 gulpfile.js 的文件: //定义依赖项 var gulp = require('gulp'); //定义合并插件 concat = require('gulp-concat'); //定义压缩css的插件 mincss = require('gulp-minify-css'); //定义重命名插件 rename = require('gulp-rename'); //定义压缩js的插件 minjs = require('gulp-uglify'); //定义一个名称为css的任务 gulp.task('css',function(){ //操作css文件夹中所有的css文件 gulp.src(['css/*.css']) //执行合并插件并给合并合并文件起名称 .pipe(concat('max.css')) //执行压缩插件 .pipe(mincss()) //执行重命名插件 .pipe(rename({suffix:'.hd'})) //把执行以上操作过后的文件放到css1文件夹中。 .pipe(gulp.dest('css1')); }) //定义一个名称为css的任务 gulp.task('js',function(){ //操作css文件夹中所有的css文件 //gulp.src(['js/*.js']) gulp.src(['js/a.js','js/index.js']) //执行合并插件并给合并合并文件起名称 .pipe(concat('max.js')) //执行压缩插件 .pipe(minjs()) //执行重命名插件 .pipe(rename({suffix:'.hd'})) //把执行以上操作过后的文件放到css1文件夹中。 .pipe(gulp.dest('js1')); }) //执行任务名为css的任务 gulp.task('default',['css','js']); //自动执行任务 gulp.watch('css/*.css',['css']); gulp.watch('js/*.js',['js']); #### 10. 使用命令行进入项目目录(gulpfile.js同级目录)运行命令 gulp 结果: ![](https://box.kancloud.cn/98b31be9229a8b8997bc34edecd6590b_467x511.png =500x400) ![](https://box.kancloud.cn/3cbd46669b6837d3126304512021bfcb_303x223.png =400x300) 代码地址:链接: https://pan.baidu.com/s/1i_nusPI8LsLYAAJdA6lh9w 密码: 9pr3