Node.js前端工具的安装

  使用到花色中:

  以下是本身用vs code自身建的一个体系:

  Node.js 1

  命令行cd到温馨建的花色文件夹,然后npm
init即可生成本人的package.json,那是祥和项目标每一种品种的多个叙述文件,定义了这一个类型所需求的各样模块,以及项指标布署音信(比如名称、版本、许可证等元数据)。

  npm下载源的配置

  npm在此地被小编理解为2个下载工具,而下载的地方为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

  将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语法错误或出现万分时能健康工作并提醒错误新闻。

  肯定照旧有部分别的功效的插件,那只是本身一时半刻精晓到的多少个,若果有其余好用的也盼望有大神能留言告知作者一下。

2、gulp的安装

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

  全局安装gulp:  

npm install gulp -g

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

前言

  即便一贯有写前端,而且档次自认上涨不慢,可是依然未有玩过模块化开发。

  对于前端的这一个工具也未有接触过,平常相似都以vs和vs
code就化解了,为了搞一搞模块化开发,准备来玩一下那些前端工具。

  所以写写这么些前端工具的安装步骤,记录一下随后忘了也能用,假使能帮到别人就更加好了。

   运维gulp完结前端创设

   根据上边包车型地铁安顿咱们能够在命令行输入 :

gulp minify-script

   那就只打包压缩JS文件,也能够输入:

gulp minify-script

   那样就到位大家拥有的创设筑工程作。

  进一步的就学能够转到:http://www.gulpjs.com.cn/

3、webpack的安装

  webpack是3个前端模块化方案,只然则是本土的,而近乎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的有血有肉布署,首先新建2个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、RequireJS1样的事物。

接下去的做事1般正是去查webpack的什么去布置哪些的了,那种小事的此处就不讲了。

貌似那是三个安装的帖子 ~~~

 

  

1、NPM和Node.js的安装

  安装node.js后,自动就设置了npm,所以那边两者写到1起了。

  nodejs的下载地址:

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

  那种事物给个下载地址就好了,依据自身电脑种类安装,做程序员的也一向不电脑小白,下一步就不说了。

  编写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']);

前端工具安装简述