[置顶] 利用gulp.js压缩css,js文件流程
2017-06-17 00:17
671 查看
看流程之前肯定得先了解一下gulp.js吧,附上链接,大家自己去看APIgulp.js中文网
下面就来说说怎么使用gulp.js,gulp.js是基于node来使用的,那么问题又来了,nodejs怎么安装,这个大家还是去菜鸟教程看一下;这里就不多说了;
查看一下你的nodejs是否安装成功,如果安装成功, 就会提示你的版本 ,我的是 v4.4.4;
第四步.在项目根目录下创建一个名为
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
sudo npm install gulp-minify-css
安装成功以后会提示你,警告'
npmWARNdeprecated
gulp-minify-css@1.2.4: Please use gulp-clean-css',那你就需要再次安装一下
sudo npm install gulp-clean-css,
安装成功以后就可以用啦;
js模块,gulp-gulify
sudo npm install gulp-uglify@latest
好啦,两个都安装成功了,接下来就是使用的时候啦;直接上代码
注意js和css,pipe的时候要引用对哦
下面就来说说怎么使用gulp.js,gulp.js是基于node来使用的,那么问题又来了,nodejs怎么安装,这个大家还是去菜鸟教程看一下;这里就不多说了;
第一步.在终端输入
node -v查看一下你的nodejs是否安装成功,如果安装成功, 就会提示你的版本 ,我的是 v4.4.4;
第二步.全局安装gulp
sudo npm install gulp@latest -g第三部.安装项目的开发依赖
sudo npm install --save-dev gulp第四步.在项目根目录下创建一个名为 gulpfile.js
的文件
var gulp = require('gulp');gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
第五步.安装压缩的模块
css安装模块, gulp-minify-css模块;在命令行输入,sudo npm install gulp-minify-css
安装成功以后会提示你,警告'
npmWARNdeprecated
gulp-minify-css@1.2.4: Please use gulp-clean-css',那你就需要再次安装一下
sudo npm install gulp-clean-css,
安装成功以后就可以用啦;
js模块,gulp-gulify
sudo npm install gulp-uglify@latest
好啦,两个都安装成功了,接下来就是使用的时候啦;直接上代码
var gulp = require('gulp'); var uglify = require('gulp-uglify'); var minfy = require('gulp-minify-css'); // 创建压缩任务 gulp.task('default', function() { // gulp.src(path)的参数可以为tring也可以为Array, //每一个元素都是你要压缩的文件的相对路径 gulp.src(['./static/js/a.js', './static/js/b.js', './static/js/c.js', './static/js/d.js',]) .pipe(uglify()) // gulp.dest(path)能被 pipe 进来,并且将会写文件。 //并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。 // 如果某文件夹不存在,将会自动创建它。 .pipe(gulp.dest('./static/min.js')); gulp.src(['./static/css/a.css', './static/css/b.css', './static/css/c.css', './static/css/d.css']) .pipe(minfy()) .pipe(gulp.dest('./static/min.css')); });最后一步 gulp一下就OK啦
注意js和css,pipe的时候要引用对哦
相关文章推荐
- 前端构建工具- gulp - 安装及简单CSS,JS文件合并压缩
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- gulp入门-压缩js/css文件(windows)
- gulp 之一 安装及简单CSS,JS文件合并压缩
- gulp压缩js和css文件
- 利用gulp对项目html,js,css,图片进行压缩
- 利用YUI Compressor对JS、CSS文件进行压缩
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- gulp入门-压缩js/css文件(windows)
- Symfony利用assetsBundle合并和压缩css,js文件
- 利用gulp工具来压缩css文件
- gulp压缩css文件跟js文件
- window7 支持一键是用TBCompressor压缩JS和CSS文件
- 使用yuicompressor-maven-plugin压缩js及css文件
- 用YUICompressor 压缩JS 与 CSS 文件
- web开发中压缩js/css文件一种巧方法
- css和js文件合并压缩工具Minify的使用
- 使用ANT对Js/Css文件进行合并和压缩处理 [转]
- CSS,JS文件压缩工具