Node.js前端工具的装

前者工具安装简述

前言

  虽然一直发描绘前端,而且档次自认上升快,但是仍然没娱乐了模块化开发。

  对于前端的这些工具为从未碰过,平时一般都是vs和vs
code就做定了,为了做一动手模块化开发,准备来打一下这些前端工具。

  所以写写这些前端工具的装步骤,记录转以后忘了邪能够因此,如果能帮到人家就是再也好了。

1、NPM和Node.js的安装

  安装node.js后,自动就设置了npm,所以这边两者写及齐了。

  nodejs的下载地址:

  https://nodejs.org/en/download/

  这种东西给个下载地址便吓了,根据自己电脑品种安装,做程序员的吧从没电脑小白,下同样步就是背着了。

  npm下载源的配备

  npm在此间为自己清楚吧一个下载工具,而下载的地方也https://www.npmjs.com 。

  只不过在国内看不稳定,因此建议采用国内镜向站点https://npm.taobao.org 。

  在cmd.exe中,运行以下命令即可:

npm --registry https://registry.npm.taobao.org info underscore

  或者找到Nodejs安装文件夹着之npmrc文件,在该文件被参加

registry = https://registry.npm.taobao.org

2、gulp的安装

  gulp用来优化前端工作流程。

  全局安装gulp:  

npm install gulp -g

  输入gulp -v可以查看到相应版本

  使用到项目面临:

  以下是自为此vs code自己建造的一个种类:

  Node.js 1

  命令行cd到温馨打的类文件夹,然后npm
init即可生成自己之package.json,这是投机种的每个门类之一个讲述文件,定义了是项目所欲之各种模块,以及项目之布置信息(比如名、版本、许可证等首批数据)。

  将gulp安装到路被

npm install gulp --save-dev

  安装后:

  Node.js 2

  这色中几近了node_modules这个文件夹,同时package.json中自行写副了devDependencies字段,并以该字段下填充了gulp模块名。

  Node.js 3

  接下去安装者gulp中可用之均等堆插件“

npm install --save-dev gulp-uglify gulp-concat gulp-imagemin gulp-htmlmin gulp-clean-css gulp-rev-append gulp-autoprefixer

  安装后:

  Node.js 4

 

  gulp-uglify也压缩js文件,gulp-concat为统一打包文件,gulp-imagemin为削减图片,gulp-htmlmin为压缩html,gulp-clean-css压缩css文件,gulp-rev-append为添加版本号。

  实际上.NET
MVC的bundle继承了点这些作用,所以用.net进行开貌似完全用不至,不过想来别的语言或应该还是用的。

  而gulp-autoprefixer是根据设置浏览器版本自动处理浏览器前缀,gulp-less插件将less文件编译成css,当有less文件来变动机关编译less,并保管less语法错误或出现异常时能健康工作并提示错误信息。

  肯定还是来部分别的功能的插件,这仅是我临时了解及的几乎独,如若发外好用的啊想生大神能留言告知我转。

  编写gulpfile.js文件

  如果要是就此这些插件,那么还要以彻底目录下加一个gulpfile.js配置文件,以下也自好的测试项目:

  Node.js 5

  根据测试项目写的配置文件:

/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-clean-css"),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    htmlmin = require('gulp-htmlmin'),
    rev = require('gulp-rev-append'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less');
//压缩html,并给页面的引用添加版本号,清除页面引用缓存
gulp.task('minifyHtml', function() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    gulp.src('examples/*.html')
        .pipe(htmlmin(options))
        .pipe(rev())
        .pipe(gulp.dest('dist/html'));
});
//压缩图片
gulp.task('minify-img', function() {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img/'));
});
//编译less
gulp.task('handleLess', function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});
//设置浏览器版本自动处理浏览器前缀,并压缩css
gulp.task('minify-css', function() {
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认:true 
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//打包并压缩js
gulp.task('minify-script', function() {
    gulp.src('src/js/*.js')
        .pipe(concat('helloworld.js')) //打包
        .pipe(uglify()) //压缩
        .pipe(gulp.dest('dist/js/'));
});
gulp.task('default', ['minifyHtml', 'minify-img', 'handleLess', 'minify-css', 'minify-script']);

   运行gulp完成前端构建

   根据上面的安排我们得以当指令执行输入 :

gulp minify-script

   这便独自由包压缩JS文件,也可输入:

gulp minify-script

   这样便完了我们富有的构建工作。

  进一步的习可以更改至:http://www.gulpjs.com.cn/

3、webpack的安装

  webpack是一个前端模块化方案,只不过是本土的,而近乎requireJs和sea.js是在线模块化方案。

  有了方安装gulp的涉webpack就简单多了。

  安装webpack :

npm install webpack -g

  接下多package.json配置文件,也就是是

npm init

  只不过我们面前配置了,那么直接下一致步:

npm install webpack --save-dev

  同是webpack也会见加到node_modules文件夹着。

那么来同样截简单的前端示例,使用webpack来实现前端模块化,我生个别个文件:

hello.js

window.resize = function() {
    console.info("我resize了!");
}

helloApp.js

var hello = require('./hello.js');
console.log(hello);

尽管非明了语法,但是盖也能领悟,helloApp.js引用了hello.js。

运行

 webpack src/js/helloApp.js dist/js/helloApp.Main.js

接下来转的helloApp.Main.js是下面是样子:

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // identity function for calling harmony imports with the correct context
/******/     __webpack_require__.i = function(value) { return value; };
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

window.resize = function() {
    console.info("我resize了!");
}

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var hello = __webpack_require__(0);
console.log(hello);

/***/ })
/******/ ]);

一律生段代码看在便坏捉急,不过实在看看吧只是即使是只就施行函数,我去了部分代码,并拓展了有些格式化,以下是本身的代码:

(function(modules) { 
    //将我们两个文件中的代码作为一个函数对象传进这里
    //然后进行某些处理
})
(
    [ 
        (
            function(module, exports) {
                //仔细对照,这是我们被引用的hello.js的代码
                window.resize = function() {
                    console.info("我resize了!");
                }
            }
        ),
        (
            function(module, exports, __webpack_require__) {
                //仔细对照,这是我们的helloApp.js的代码,
                //只不过require被换位了__webpack_require__
                //而里面的路径'./hello.js'被换位了0,哈,简单猜想一下,这个0就是我们hello.js的代码所在的函数对象,在传进去的moudles数组中所在的索引
                var hello = __webpack_require__(0);
                console.log(hello);
            }
        ) 
    ]
);

然后我们进入部分被删掉的代码:

(function(modules) { 
            // The module cache
/******/     var installedModules = {};
/******/     // The require function
            //(2)第二步看第一步调用的这个函数,果然1就是moduleId
/******/     function __webpack_require__(moduleId) {
/******/
/******/         //  Check if module is in cache
                //  查看模块缓存中有不有moduleId为1的,有就直接返回installedModules[moduleId].exports
                //  读到这里只知道起到个缓存的作用,先不管这个是什么鬼,下一步
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
                // 走到这里,肯定表示没缓存嘛,于是创建下面这个对象
                // 这个对象的i为入口模块索引,
                // l是false,不知道什么鬼不管,
                // exports就是输出对象嘛,同时将这个对象的引用交给了installedModules[moduleId]和module
                // 也就是说这个对象我们缓存了
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
                // 来到了有趣的地方,modules是我们传进来的模块数组,modules[moduleId]就是我们的入口函数,也就是下面这个:
                //  (
                //        function(module, exports, __webpack_require__) {
                //            hello = __webpack_require__(0);
                //            console.log(hello);
                //        }
                //    ) 
                // 那么运行下面代码的大致效果就是:
                //  var entryModule=function(module, exports, __webpack_require__) {
                //    hello = __webpack_require__(0);
                //    console.log(hello);
                //  };
                //  entryModule(module,module.exports,__webpack_require__);
                //  这段代码的就厉害了,又执行了__webpack_require__这个函数,不过此时的参数为0,也就是我们那个被引用的js的代码的函数对象的索引
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
                // 此时我们了解到l的作用表示这个模块是否被加载
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
                // 然后返回 module.exports,
                // 如果此时是hello.js的代码运行完,那么此时就会将hello.js中给形参exports的部分返回给hello那个变量
                // 此时我就明白了,webpack在不同的js之间如何建立依赖关系
                // 让被引用的部分只返回希望返回的部门,放到exports中,供引用的js调用
/******/         return module.exports;
/******/     }
/******/
/******/     // Load entry module and return exports
            // (1)第一步,看上面自带的注释,表示:这是载入入口模块,并且返回输出
            //  这个入口模块什么的,给了个s什么的,然后给了它个1,这里的s暂时看着没什么用啊
            // 那么就看成__webpack_require__(1)就好了
            // 这个1的话我们猜测就是传进来的module数组中那个引用其他js的helloApp.js的代码的函数对象的索引
/******/     return __webpack_require__(__webpack_require__.s = 1);
})
(
    [ 
        (
            function(module, exports) {
                //仔细对照,这是我们被引用的hello.js的代码
                window.resize = function() {
                    console.info("我resize了!");
                }
            }
        ),
        (
            function(module, exports, __webpack_require__) {
                //仔细对照,这是我们的helloApp.js的代码,
                //只不过require被换位了__webpack_require__
                //而里面的路径'./hello.js'被换位了0,哈,简单猜想一下,这个0就是我们hello.js的代码所在的函数对象,在传进去的moudles数组中所在的索引
                hello = __webpack_require__(0);
                console.log(hello);
            }
        ) 
    ]
);

OK,到了这边,我对webpack的光景功能就出矣一个叩问~

这不就是和我们在.net或者java中之using或import一样嘛,而者是是东西就是是我们的Main函数,果然,没什么了不起上之,其实就是这么简单。

连接下就失去打听一下webpack的切实部署,首先新建一个webpack.config.js文件,然后于包简单化:

module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    }
};

下一场直接运行webpack命令即可,就一定给活动去追寻webpack.config.js文件,然后根据文件中之入口app.js去生成app.bundle.js。

顶此意思就是那个懂得了,webpack实际上即便是一个接近Seajs、RequireJS一样的物。

连接下的办事一般就是是错过查webpack的哪些去安排什么的了,这种小事的这里就是不谈了。

貌似这是一个安的帖子 ~~~