MyException - 我的异常网
当前位置:我的异常网» 图形/图像 » gulp 压缩js,css跟image

香港六合彩神算:gulp 压缩js,css跟image

香港六合彩现场直播 www.hppyv.com  网友分享于:2018-05-08  浏览:0次
gulp 压缩js,css和image

香港六合彩现场直播 www.hppyv.com 参考链接:https://www.kancloud.cn/thinkphp/gulp-guide/43994

?

#安装gulp

gulp是基于Node.js的前端构建工具,所以首先需要安装nodejs。

nodejs安装://tzhennan.iteye.com/admin/blogs/2410483

?

#nodejs安装成功之后,使用npm安装全局gulp

$ npm install -g gulp

#在项目根目录下安装本地gulp

$ npm install -g gulp --save-dev

安装成功后在项目根目录下会多出 node_modules 文件夹

?

#gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件

1、css压缩:gulp-clean-css

2、js压缩:gulp-uglify

3、js合并:gulp-concat

4、重命名:gulp-rename

5、js代码检测:gulp-jshint

6、图谱压缩:gulp-imagemin

#在项目根目录下执行命令安装以上插件

$ npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-imagemin --save-dev

$ npm install jshint gulp-jshint --save-dev

ps:gulp-jshint和jshnt要一起安装

安装好的插件会出现在上面提到的node_modules文件夹中

?

?

#使用gulp

在gulpfile.js中添加以下代码

var gulp = require('gulp'),

cleanCSS = require('gulp-clean-css'),

concat = require('gulp-concat'),

uglify = require('gulp-uglify'),

rename = require('gulp-rename'),

jshint = require('gulp-jshint'),

imageMin = require('gulp-imagemin');

?

//语法检查

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

? ? return gulp.src('js/*.js')

? ? ? ? .pipe(jshint())

? ? ? ? .pipe(jshint.reporter('default'));

});

?

//压缩css

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

? ? return gulp.src('css/*.css') ? ?//需要操作的文件

? ? ? ? .pipe(rename({suffix: '.min'})) ? //rename压缩后的文件名

? ? ? ? .pipe(cleanCSS({compatibility: 'ie7'})) ? //执行压缩

? ? ? ? .pipe(gulp.dest('css-min')); ? //输出文件夹

});

?

//压缩,合并 js

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

? ? return gulp.src('js/*.js') ? ? ?//需要操作的文件

? ? ? ? .pipe(concat('main.js')) ? ?//合并所有js到main.js

? ? ? ? .pipe(gulp.dest('js')) ? ? ? //输出到文件夹

? ? ? ? .pipe(rename({suffix: '.min'})) ? //rename压缩后的文件名

? ? ? ? .pipe(uglify()) ? ?//压缩

? ? ? ? .pipe(gulp.dest('js-min')); ?//输出

});

?

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

gulp.src('images/*.*')

? ? .pipe(imageMin({progressive: true}))

? ? .pipe(gulp.dest('images-min'))

})

?

//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)

gulp.task('default',['jshint'],function() {

? ? gulp.start('minifycss','minifyjs');?

});

?

#在项目根目录下执行gulp命令:

$ gulp

[20:43:30] Using gulpfile ~/project/html/gulpfile.js

[20:43:30] Starting 'jshint'...

[20:43:30] Finished 'jshint' after 60 ms

[20:43:30] Starting 'default'...

[20:43:30] Starting 'minifycss'...

[20:43:30] Starting 'minifyjs'...

[20:43:30] Finished 'default' after 3.24 ms

[20:43:30] Finished 'minifycss' after 134 ms

[20:43:30] Finished 'minifyjs' after 132 ms

?

现在可以在css-min文件夹中看到压缩好的css文件,在js-min中可以看到合并压缩好的main.min.js 。任务完成,只需要将html中css,js引用的路径修改成新的路径即可。

文章评论

软件开发程序错误异常香港六合彩现场直播Copyright © 2009-2015 MyException 版权所有
925| 731| 509| 783| 369| 692| 51| 665| 99| 158|