使用Gulp压缩CSS/JS

一、安装

1.安装gulp

npm install -g gulp

2.检查gulp 版本

gulp -v

3.在项目文件夹下安装gulp

npm install --save-dev gulp

二、压缩JS

1.安装gulp-uglify模块

npm install gulp-uglify

2.在项目根目录创建gulpfile.js文件

3.在gulpfile.js文件中写入代码

1. // 获取 gulp
2. var gulp = require('gulp');
3. // 获取 uglify 模块（用于压缩 JS）
4. var uglify = require('gulp-uglify');
6. // 压缩 js 文件
7. // 在命令行使用 gulp script 启动此任务
8. gulp.task('jscompress', function() {
9. // 1. 找到文件
10. return gulp.src('js/1.js')
11. // 2. 压缩文件
12. .pipe(uglify())
13. // 3. 另存压缩后的文件
14. .pipe(gulp.dest('dist/js'));
15. });

4.命令行中切换到gulpfile.js所在的目录，执行如下命令开始压缩

gulp script

5.在gulpfile.js中添加自动监视任务

1. // 在命令行使用 gulp auto 启动此任务
2. gulp.task('auto', function () {
3. // 监听文件修改，当文件被修改则执行 script 任务
4. gulp.watch('js/1.js', ['jscompress']);
5. });

6.在gulpfile.js中设置默认任务（即命令行中输入gulp执行的任务）

1. // 使用 gulp.task('default') 定义默认任务
2. // 在命令行使用 gulp 启动 script 任务和 auto 任务
3. gulp.task('default', ['auto']);

三、压缩CSS

1.安装gulp-clean-css模块

npm install gulp-clean-css

2.在gulpfile.js文件中添加相应任务

1. // 获取 cleancss 模块（用于压缩 CSS）
2. var cleanCSS = require('gulp-clean-css');
4. // 压缩 css 文件
5. // 在命令行使用 gulp csscompress 启动此任务
6. gulp.task('csscompress', function() {
7. // 1. 找到文件
8. return gulp.src('css/my.css')
9. // 2. 压缩文件
10. .pipe(cleanCSS())
11. // 3. 另存压缩后的文件
12. .pipe(gulp.dest('dist/css'));
13. });

3.修改添加对应的自动监视任务

1. // 在命令行使用 gulp auto 启动此任务
2. gulp.task('auto', function () {
3. // 监听文件修改，当文件被修改则执行 script 任务
4. gulp.watch('js/1.js', ['jscompress']);
5. gulp.watch('css/my.css', ['csscompress']);
6. });

四、重命名文件

1.安装gulp-rename模块

npm install gulp-rename

2.修改gulpfile.js内代码

1. // 获取 gulp
2. var gulp = require('gulp');
3. // 获取 uglify 模块（用于压缩 JS）
4. var uglify = require('gulp-uglify');
5. // 获取 cleancss 模块（用于压缩 CSS）
6. var cleanCSS = require('gulp-clean-css');
7. var rename = require("gulp-rename");
9. // 压缩 js 文件
10. // 在命令行使用 gulp jscompress 启动此任务
11. gulp.task('jscompress', function() {
12. // 1. 找到文件
13. return gulp.src('js/1.js')
14. .pipe(rename({suffix: '.min'}))
15. // 2. 压缩文件
16. .pipe(uglify())
17. // 3. 另存压缩后的文件
18. .pipe(gulp.dest('dist/js'));
19. });
20. // 压缩 css 文件
21. // 在命令行使用 gulp csscompress 启动此任务
22. gulp.task('csscompress', function() {
23. // 1. 找到文件
24. return gulp.src('css/my.css')
25. .pipe(rename({suffix: '.min'}))
26. // 2. 压缩文件
27. .pipe(cleanCSS())
28. // 3. 另存压缩后的文件
29. .pipe(gulp.dest('dist/css'));
30. });
32. // 在命令行使用 gulp auto 启动此任务
33. gulp.task('auto', function () {
34. // 监听文件修改，当文件被修改则执行 script 任务
35. gulp.watch('js/1.js', ['jscompress']);
36. gulp.watch('css/my.css', ['csscompress']);
37. });
40. // 使用 gulp.task('default') 定义默认任务
41. // 在命令行使用 gulp 启动 script 任务和 auto 任务
42. gulp.task('default', ['auto']);

参考资料：
https://github.com/nimojs/gulp-book
http://www.cnblogs.com/Tzhibin/p/4318457.html