├── css
├── main.css
└── view.css
├── js
├── plus.js
└── index.js
├── README.md
├── webpack.config.js
├── .editorconfig
├── index.html
├── .gitignore
├── package.json
├── LICENSE
└── gulpfile.js
/css/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-color: #008080;
3 | }
4 |
--------------------------------------------------------------------------------
/css/view.css:
--------------------------------------------------------------------------------
1 | .view {
2 | background-color: #FFFFFF;
3 | }
4 |
--------------------------------------------------------------------------------
/js/plus.js:
--------------------------------------------------------------------------------
1 | /**
2 | * learning-gulp - plus.js
3 | * Created by mengdesen on 15/4/14.
4 | */
5 |
6 | 'use strict';
7 |
8 | module.exports = function (a, b) {
9 | return a + b;
10 | };
11 |
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * learning-gulp - index.js
3 | * Created by mengdesen on 15/4/14.
4 | */
5 |
6 | 'use strict';
7 |
8 | var plus = require('./plus');
9 |
10 | console.log(plus(2, 2));
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # learning-gulp
2 |
3 | ## 文章记录使用Gulp的一般套路
4 |
5 | 这个套路解决以下问题
6 | * MD5使用的rev
7 | * 静态文件打包使用webpack
8 | * JS压缩使用uglify
9 | * CSS压缩使用cssshrink
10 | * *(可选)*CDN使用七牛，所以有个可选的负责上传的gulp插件
11 | * concat是Gulp标配，不解释
12 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * learning-gulp - webpack.config.js
3 | * Created by mengdesen on 15/4/14.
4 | */
5 |
6 | 'use strict';
7 |
8 | module.exports = {
9 | entry: "./js",
10 | output: {
11 | path: __dirname + "/build",
12 | filename: "app.js"
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 |
2 |
3 | root = true
4 |
5 | # common settings
6 | [*]
7 | charset = utf-8
8 | end_of_line = lf
9 | indent_size = 2
10 | indent_style = space
11 | insert_final_newline = true
12 | trim_trailing_whitespace = true
13 |
14 | # python settings
15 | [*.py]
16 | indent_size = 4
17 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | learning-gulp -
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | .idea
29 | build
30 | dist
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "learning-gulp",
3 | "version": "0.0.0",
4 | "description": "learing gulp",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/demohi/learning-gulp.git"
12 | },
13 | "author": "mdemo",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/demohi/learning-gulp/issues"
17 | },
18 | "homepage": "https://github.com/demohi/learning-gulp",
19 | "devDependencies": {
20 | "gulp": "^3.8.11",
21 | "gulp-concat": "^2.5.2",
22 | "gulp-cssshrink": "^0.1.4",
23 | "gulp-qn": "^0.1.0",
24 | "gulp-rev": "^3.0.1",
25 | "gulp-rev-collector": "^0.1.4",
26 | "gulp-uglify": "^1.2.0",
27 | "gulp-webpack": "^1.3.2",
28 | "run-sequence": "^1.0.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 mdemo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /**
2 | * learning-gulp - gulpfile.js
3 | * Created by mengdesen on 15/4/14.
4 | * Last modified by nieweidong on 2015/04/15
5 | */
6 |
7 | 'use strict';
8 |
9 | var gulp = require('gulp');
10 | var uglify = require('gulp-uglify');
11 | var concat = require('gulp-concat');
12 | var shrink = require('gulp-cssshrink');
13 |
14 | // 静态文件打包合并
15 | var webpack = require('gulp-webpack');
16 | // 上传七牛sdn
17 | var qn = require('gulp-qn');
18 | // MD5戳
19 | var rev = require('gulp-rev');
20 | var revCollector = require('gulp-rev-collector');
21 | var runSequence = require('run-sequence');
22 |
23 | var config = require('./webpack.config');
24 | var qiniu = {
25 | accessKey: '6sBCo463jJOCnBIYX__uy9avZ7C2hj_MHb-ffKAr',
26 | secretKey: '3vPk7fB0HcwL5V9E2AErHuR19HM389eYqdvQcncL',
27 | bucket: 'xdemo',
28 | domain: 'http://7xik9a.com1.z0.glb.clouddn.com'
29 | };
30 |
31 | gulp.task('js', function () {
32 | gulp.src('./js')
33 | .pipe(webpack(config))
34 | .pipe(gulp.dest('./build'));
35 | });
36 |
37 | gulp.task('css', function () {
38 | gulp.src(['./css/main.css', './css/view.css'])
39 | .pipe(concat('app.css'))
40 | .pipe(gulp.dest('./build'));
41 | });
42 | gulp.task('publish-js', function () {
43 | return gulp.src(['./js'])
44 | .pipe(webpack(config))
45 | .pipe(uglify())
46 | .pipe(rev())
47 | .pipe(gulp.dest('./build'))
48 | .pipe(qn({
49 | qiniu: qiniu,
50 | prefix: 'gmap'
51 | }))
52 | .pipe(rev.manifest())
53 | .pipe(gulp.dest('./build/rev/js'));
54 | });
55 | gulp.task('publish-css', function () {
56 | return gulp.src(['./css/main.css', './css/view.css'])
57 | .pipe(concat('app.css'))
58 | .pipe(shrink())
59 | .pipe(rev())
60 | .pipe(gulp.dest('./build'))
61 | .pipe(qn({
62 | qiniu: qiniu,
63 | prefix: 'gmap'
64 | }))
65 | .pipe(rev.manifest())
66 | .pipe(gulp.dest('./build/rev/css'));
67 | });
68 | gulp.task('watch', function () {
69 | gulp.watch('./css/*.css', ['css']);
70 | gulp.watch('./js/*.js', ['js']);
71 | });
72 | gulp.task('publish-html', function () {
73 | return gulp.src(['./build/rev/**/*.json', './index.html'])
74 | .pipe(revCollector({
75 | dirReplacements: {
76 | 'build/': ''
77 | }
78 | }))
79 | .pipe(gulp.dest('./dist/'));
80 | });
81 |
82 | gulp.task('publish', function (callback) {
83 | runSequence(
84 | ['publish-css', 'publish-js'],
85 | 'publish-html',
86 | callback);
87 | });
88 |
89 |
90 |
--------------------------------------------------------------------------------