gulp入门与一些基本设置

这里是gulp入门的一些操作，实现了编译sass文件、压缩、合并、添加版本号等基本功能。

友情提示，如果npm出现无法下载可以安装 cnpm。在安装完Nodejs 后

1. npm install cnpm -g --registry=https://registry.npm.taobao.org

完成后可

1. cnpm -v

查看安装结果

1.安装Nodejs

选择合适的版本下载Nodejs

2.安装全局gulp

1. npm install --global gulp-cli

3.进入项目目录（之后的操作全是在此目录下进行）

1. cd desktop/myprogram

4.初始化package.json

1. npm init

5.安装项目gulp

1. npm install --save-dev gulp

6.安装插件

1. npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint jshint  gulp-uglify gulp-notify gulp-useref gulp-load-plugins  gulp-clean-css gulp-sass  gulp-if gulp-users gulp-rev gulp-rev-collector  —save-dev

7.新建gulpfile.js

1. var gulp = require('gulp');
2. gulp.task('default', function() {
3. // place code for your default task here
4. });

8.测试

在终端输入命令

1. gulp

9.附上index.html（压缩css、js部分） 、package.json 和 gulpfile.js

index.html

1. <link rel="shortcut icon" href="images/favicon.ico">
2. <!-- build:css lib/main.css -->
3. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
4. <link rel="stylesheet" type="text/css" href="css/main.css">
5. <link rel="stylesheet" type="text/css" href="css/common.css">
6. <!-- endbuild -->
7. <!-- build:js lib/main.js -->
8. <script type="text/javascript" src="js/jquery.min.js"></script>
9. <script type="text/javascript" src="js/bootstrap.min.js"></script>
10. <script type="text/javascript" src="js/route.js"></script>
11. <script type="text/javascript" src="js/main.js"></script>
12. <!-- endbuild -->

package.json

1. "devDependencies": {
2. "del": "^2.2.0",
3. "gulp": "^3.9.1",
4. "gulp-clean-css": "^2.0.8",
5. "gulp-concat": "^2.6.0",
6. "gulp-htmlmin": "^2.0.0",
7. "gulp-if": "^2.0.1",
8. "gulp-imagemin": "^3.0.1",
9. "gulp-jshint": "^2.0.1",
10. "gulp-load-plugins": "^1.2.4",
11. "gulp-notify": "^2.2.0",
12. "gulp-rev": "^7.0.0",
13. "gulp-rev-collector": "^1.0.3",
14. "gulp-sass": "^2.3.1",
15. "gulp-sequence": "^0.4.5",
16. "gulp-uglify": "^1.5.3",
17. "gulp-useref": "^3.1.0",
18. "imagemin-pngcrush": "^5.0.0",
19. "jshint": "^2.9.2"
20. }

gulpfile.js

1. 'use strict';
2. var gulp = require('gulp'),
3. $ = require("gulp-load-plugins")(),
4. sass = require("gulp-sass"),
5. rev = require("gulp-rev"),
6. del = require('del');
7. gulp.task('default', function() {
8. gulp.run('styles', 'jshint');
9. gulp.watch('src/styles/*.scss', ['styles']);
10. });
11. gulp.task('build', $.sequence('cpfiles', 'useref', 'cphtml', 'revfile',
12. 'revhtml', 'delfiles', 'img','htmlmin'));
13. gulp.task('htmlmin', function() {
14. return gulp.src(['dist/*/*.html', 'dist/*.html'])
15. .pipe($.htmlmin({collapseWhitespace: true}))
16. .pipe(gulp.dest('dist/'))
17. .pipe($.notify({ message: 'htmlmin task done' }));
18. });
19. gulp.task('delfiles', function(){
20. del([
21. 'dist/js',
22. 'dist/css',
23. 'dist/styles',
24. 'dist/lib/index.html',
25. 'dist/lib/rev-manifest.json'
26. ]);
27. })
28. gulp.task('revhtml', function () {
29. return gulp.src(['dist/lib/rev-manifest.json', 'dist/lib/index.html'])
30. .pipe($.revCollector())
31. .pipe(gulp.dest('dist/'))
32. .pipe($.notify({ message: 'revhtml task done' }));
33. });
34. gulp.task('revfile', function(){
35. return gulp.src(['dist/lib/*.css', 'dist/lib/*.js'])
36. .pipe($.rev())
37. .pipe(gulp.dest('dist/lib/'))
38. .pipe(rev.manifest({
39. path: 'rev-manifest.json',
40. merge: true
41. }))
42. .pipe(gulp.dest("dist/lib/"))
43. .pipe($.notify({ message: 'revfile task done' }));
44. });
45. gulp.task('cphtml', function(){
46. return gulp.src('dist/*.html')
47. .pipe(gulp.dest('dist/lib/'))
48. .pipe($.notify({ message: 'copyhtml task done' }));
49. })
50. gulp.task('useref', function() {
51. return gulp.src('dist/*.html')
52. .pipe($.useref())
53. .pipe($.if('*.js', $.uglify()))
54. .pipe($.if('*.css', $.cleanCss({compatibility: 'ie8'})))
55. .pipe(gulp.dest('dist/'))
56. .pipe($.notify({ message: 'useref task done' }));
57. });
58. gulp.task('cpfiles', ['styles'], function(){
59. return gulp.src(['src/*/*','src/*'])
60. .pipe(gulp.dest('dist/'))
61. .pipe($.notify({ message: 'copyfiles task done' }));
62. })
63. gulp.task('img', function() {
64. return gulp.src('dist/images/*.*')
65. .pipe($.imagemin({
66. progressive: true,
67. svgoPlugins: [{removeViewBox: false}],
68. use: [$.imagemin()]
69. }))
70. .pipe(gulp.dest('dist/images/'))
71. .pipe($.notify({ message: 'img task done' }));
72. });
73. gulp.task('styles', function(){
74. return gulp.src('src/styles/*.scss')
75. .pipe(sass().on('error', sass.logError))
76. .pipe(gulp.dest('src/css'))
77. .pipe($.notify({ message: 'sass task done' }));
78. })
79. gulp.task('jshint', function() {
80. return gulp.src(['src/js/main.js','src/js/route.js'])
81. .pipe($.jshint())
82. .pipe($.jshint.reporter('default'))
83. .pipe($.notify({ message: 'jshint task done' }));
84. });
85. gulp.task('clean', function(){
86. del([
87. 'dist/'
88. ]);
89. })

文件结构,上层为 desktop/myprogram/