JavaScript,Ruby,Ruby on Rails blog

| 工具, 前端工程

工具

一些开发相关配置

直接 git clone git@github.com:hxfsc/front-end-project.git

  • Sublime Text VSCode 安装 editorconfig 插件
  • 在项目目录新建 .editorconfig 文件 内容如下
1
2
3
4
5
6
7
8
9
root = true

[*]
charset = utf-8
indent_style = tab
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
  • 新建 .gitignore 文件
1
2
3
.DS_Store
node_modules/
dist/
  • gulp 配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
var gulp = require("gulp"),
    mkdir = require("mkdirp");

var includeFile = require("gulp-file-include"),
    connect = require("gulp-connect"),
    //proxy = require('http-proxy-middleware'),
    sass = require("gulp-sass"),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnext = require("cssnext"),
    precss = require("precss");

var __srcPath = "./src/";
var __buildPath = "./build/";

var __dev = {
    port: 8002,

    src: {
        html: __srcPath + "html/",
        style: __srcPath + "styles/",
        js: __srcPath + "javascript/",
        images: __srcPath + "images/",
        img: __srcPath + "img/"
    },

    build: {
        html: __buildPath,
        style: __buildPath + "public/styles/",
        js: __buildPath + "public/javascript/",
        images: __buildPath + "public/images/",
        img: __buildPath + "public/img/"
    }
};

gulp.task("create", function() {
    mkdir.sync(__dev.src.html);
    mkdir.sync(__dev.src.js);
    mkdir.sync(__dev.src.style);
    mkdir.sync(__dev.src.images);
    mkdir.sync(__dev.src.img);
});

gulp.task("html", function() {
    gulp
        .src(__dev.src.html + "*.html")
        .pipe(
            includeFile({
                indent: true
            })
        )
        .pipe(gulp.dest(__dev.build.html));
});

gulp.task("style", function() {
    var processors = [autoprefixer({ browsers: [">1%", "last 12 version"] }), cssnext, precss];

    gulp
        .src(__dev.src.style + "*.scss")
        .pipe(
            sass({
                /***
                 * outputStyle {'nested':'嵌套','expanded':'展开','compact':'紧凑','compressed':'压缩'}
                 */
                outputStyle: "compressed"
            }).on("error", sass.logError)
        )
        .pipe(postcss(processors))
        .pipe(gulp.dest(__dev.build.style));
});

gulp.task("img", function() {
    gulp.src(__dev.src.img + "*.*").pipe(gulp.dest(__dev.build.img));
});

gulp.task("images", function() {
    gulp.src(__dev.src.images + "*.*").pipe(gulp.dest(__dev.build.images));
});

//var webpack = require('webpack'), webpackConfig = require('./webpack.config.js');

gulp.task("javascript", function(callback) {
    gulp.src(__dev.src.js + "**/*.*").pipe(gulp.dest(__dev.build.js));
    // var __webpackConfig = Object.create(webpackConfig);
    // webpack(__webpackConfig,function(err,stats) {
    //  callback()
    // });
});

gulp.task("fonts", function(callback) {
    gulp.src("./src/fonts/" + "*.*").pipe(gulp.dest("./build/public/fonts"));
    // var __webpackConfig = Object.create(webpackConfig);
    // webpack(__webpackConfig,function(err,stats) {
    //  callback()
    // });
});

gulp.task("connect", function() {
    connect.server({
        root: __dev.build.html,
        port: __dev.port,
        //host: "192.168.3.38",
        livereload: true
        /*middleware: function(connect, opt) {
   return [
    proxy('/client/getArticleList',  {
    target: 'http://www.opsmarttech.com',
    changeOrigin:true
   }),
   proxy('/client/getArticleInfo', {
   target: 'http://www.opsmarttech.com',
   changeOrigin:true
   }),
   proxy('/client/submitMsg', {
   target: 'http://www.opsmarttech.com',
   changeOrigin:true
   })
   ]
  }*/
    });
});

gulp.task("reload", function() {
    gulp.src(__dev.build.html + "*.html").pipe(connect.reload());
});

gulp.task("watch", function() {
    gulp.watch(__dev.src.html + "**/*.html", ["html"]);
    gulp.watch(__dev.src.style + "**/*.scss", ["style"]);
    gulp.watch(__dev.src.js + "**/*.js", ["javascript"]);
    gulp.watch(__dev.build.style + "*.css", ["reload"]);
    gulp.watch(__dev.build.js + "*.js", ["reload"]);
    gulp.watch(__dev.build.html + "*.html", ["reload"]);
});

gulp.task("default", ["html", "style", "img", "images", "javascript", "fonts", "connect", "watch"]);
  • 新建 webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var webpack = require("webpack");
var __srcPath = "./src/";
var __buildPath = "./build/";

var __dev = {
    src: {
        js: __srcPath + "javascript/"
    },

    build: {
        js: __buildPath + "/public/javascript/"
    }
};

module.exports = {
    entry: __dev.src.js + "main.js",
    output: {
        path: __dev.build.js,
        filename: "main.js"
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            }
        ]
    },
    // resolve: {
    //    alias: {
    //      jquery: __dev.src.js + 'jquery'
    //    }
    //  },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
        //
        //

        // new webpack.ProvidePlugin({
        //    $:"./jquery",
        //    jQuery:"./jquery",
        //    "window.jQuery":"./jquery"
        // })
    ]
};
  • npm init 新建配置文件 package.json devDependencies{} 配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"autoprefixer": "^6.6.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"cssnext": "^1.8.4",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-connect": "^5.0.0",
"gulp-file-include": "^1.0.0",
"gulp-postcss": "^6.2.0",
"gulp-sass": "^3.1.0",
"http-proxy-middleware": "^0.17.3",
"precss": "^1.4.0",
"webpack": "^1.14.0"
  • Sublime Text、VSCode 安装 prettier 插件
  • 新建 .prettierrc 文件
    1
    2
    3
    4
    {
      "tabWidth": 4,
      "useTabs": true
    }

Comments