gulp构建工具

下面是压缩css的步骤，js同理，只是压缩插件不同

首先要生成package.json包命令:npm init

第二步：安装gulp命令（css需要）：npm install --save-dev gulp

第三步：安装(css)所有gulp插件命令：npm i gulp-clean-css gulp-concat gulp-rev gulp-rev-collector --save-dev

 

第四步：上面图为对比图。自行考虑链接位置。在根目录下创建gulpfile.js文件，里面代码为（这一般是第一步）：

// 引用插件

const gulp = require('gulp');

const cleanCSS = require('gulp-clean-css');

const concat = require('gulp-concat');

const rev = require('gulp-rev');

const revCollector = require('gulp-rev-collector');

gulp.task('minifyTask', function() {

return gulp.src('public/stylesheets/*.css')

.pipe(concat('ab.css'))

.pipe(cleanCSS())

.pipe(rev())

.pipe(gulp.dest('dist/css'))

.pipe(rev.manifest())

.pipe(gulp.dest('public/rev'))

});

gulp.task('revTask', ['minifyTask'], function() {

return gulp.src(['pubulic/rev/*mainfest.json', '*.html'])

.pipe(revCollector())

.pipe(gulp.dest(''))

})

gulp.task('default', ['minifyTask']);

 

js压缩加如下代码：

先在命令行里面引入npm install gulp-uglify --save-dev这个包

const uglify = require('gulp-uglify'); // 获取 uglify 模块（用于压缩 JS）

 

// 压缩 js 文件

// 在命令行使用 gulp script 启动此任务

gulp.task('script', function() {

// 1. 找到文件

return gulp.src('public/javascripts/*.js')

.pipe(concat('ab.js'))

// 2. 压缩js文件

.pipe(uglify())

.pipe(rev())

// 3. 另存压缩后的文件

.pipe(gulp.dest('dist/js'))

.pipe(rev.manifest())

.pipe(gulp.dest('public/rev'))

})

最后运行gulp script命令实现js压缩

压缩图片：按照前两个更改代码