Gulp:前端自动化构建工具 gulp安装npm install gulp gulp-cli -D新建配置文件根目录下新建gulpfile.js文件const gulp = require('gulp'); // var path = require('path'); const babel = require('gulp-babel'); //babel转码 var less = require('gulp-less'); //less var sass = require('gulp-sass')(require('sass')); //sass const eslint = require('gulp-eslint'); var browserify = require('gulp-browserify'); //browserify var ts = require('gulp-typescript'); //babel转码; gulp.task('babel', function () { return gulp .src('src/**/*.js') .pipe( babel({ presets: ['@babel/env'], }) ) .pipe(gulp.dest('lib')); }); //less编译 gulp.task('less', function () { return gulp.src('src/less/**/*.less').pipe(less()).pipe(gulp.dest('lib/css')); //sass编译 gulp.task('sass', function () { return gulp.src('src/sass/**/*.scss').pipe(sass()).pipe(gulp.dest('lib/css')); }); //eslint gulp.task('eslint', () => { return gulp .src(['src/js/**/*.js']) .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()); }); // Basic usage gulp.task('build', function () { // Single entry point to browserify return gulp.src('lib/js/app.js').pipe(browserify()).pipe(gulp.dest('./dist')); }); //文件监听 gulp.task('watch', function () { //sass监听 gulp.watch('src/sass/**/*.scss', function () { return gulp .src('src/sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('lib/css')); }); //less监听 gulp.watch('src/less/**/*.less', function () { return gulp .src('src/less/**/*.less') .pipe(less()) .pipe(gulp.dest('lib/css')); }); //babel转译 gulp.watch('src/js/**/*.js', function () { return gulp .src('src/js/**/*.js') .pipe( babel({ presets: ['@babel/env'], }) ) .pipe(gulp.dest('lib/js')); }); //监听整个src gulp.watch('lib/js/app.js', function () { return gulp .src('lib/js/app.js') .pipe(browserify()) .pipe(gulp.dest('./dist')); }); // TypeScript gulp.watch('src/js/ts/*.ts', function () { return gulp.src('src/js/ts/*.ts').pipe(ts()).pipe(gulp.dest('dist/js/')); }); });

package.json文件 scripts字段{callout color="#f0ad4e"}scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。{/callout}{alert type="info"}下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令。"scripts": { "preinstall": "echo here it comes!", "postinstall": "echo there it goes!", "start": "node index.js", "test": "tap test/*.js" }{/alert}dependencies字段，devDependencies字段{callout color="#91d9fd"}dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。{/callout}{alert type="success"}{ "devDependencies": { "browserify": "~13.0.0", "karma-browserify": "~5.0.1" } }{/alert}{alert type="error"}对应的版本可以加上各种限定，主要有以下几种：指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。latest：安装最新版本。{/alert}{alert type="success"}package.json文件可以手工编写，也可以使用npm init命令自动生成。$ npm init $ npm init -y有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块。$ npm install如果一个模块不在package.json文件之中，可以单独安装这个模块，并使用相应的参数，将其写入package.json文件之中。# 安装到生产环境(dependencies节点) $ npm install express --save $ npm install express -S # 安装到开发环境(devDependencies) $ npm install express --save-dev $ npm install express -D{/alert}bin字段{alert type="info"}bin项用来指定各个内部命令对应的可执行文件的位置。"bin": { "someTool": "./bin/someTool.js" }上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。在上面的例子中，someTool.js会建立符号链接node_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本。 因此，像下面这样的写法可以采用简写。scripts: { start: './node_modules/bin/someTool.js build' } // 简写为 scripts: { start: 'someTool build' } 所有node_modules/.bin/目录下的命令，都可以用npm run [命令]的格式运行。在命令行下，键入npm run，然后按tab键，就会显示所有可以使用的命令。{/alert}main字段{alert type="info"}main字段指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。{/alert}config 字段{alert type="success"}config字段用于添加命令行的环境变量。{ "name" : "foo", "config" : { "port" : "8080" }, "scripts" : { "start" : "node server.js" } }然后，在server.js脚本就可以引用config字段的值。http .createServer(...) .listen(process.env.npm_package_config_port){/alert}

CommonJS规范 {alert type="info"}文章内容来自于阮一峰老师博客,其他详情请拜读原文。{/alert}概述{alert type="info"}每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。如果想在多个文件分享变量，必须定义为global对象的属性。global.warning = true;所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。模块加载的顺序，按照其在代码中出现的顺序。{/alert}module对象{callout color="#f0ad4e"}　　如果在命令行下调用某个模块，比如node something.js，那么module.parent就是null。　　如果是在脚本之中调用，比如require('./something.js')，那么module.parent就是调用它的模块。利用这一点，可以判断当前模块是否为入口脚本。{/callout}{alert type="success"}if (!module.parent) { // ran with `node something.js` app.listen(8088, function() { console.log('app listening on port 8088'); }) } else { // used with `require('/.something.js')` module.exports = app; }{/alert}{alert type="warning"}每个模块内部，都有一个module对象，代表当前模块。它有以下属性。module.id 模块的识别符，通常是带有绝对路径的模块文件名。module.filename 模块的文件名，带有绝对路径。module.loaded 返回一个布尔值，表示模块是否已经完成加载。module.parent 返回一个对象，表示调用该模块的模块。module.children 返回一个数组，表示该模块要用到的其他模块。module.exports 表示模块对外输出的值。{/alert}module.exports属性{callout color="#b070ff"}module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。如果一个模块的对外接口，就是一个单一的值，不能使用exports输出，只能使用module.exports输出。{/callout}require命令{alert type="info"}require命令用于加载文件，后缀名默认为.js。根据参数的不同格式，require命令去不同路径寻找模块文件。如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js')将加载/home/marco/foo.js。如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle')将加载当前脚本同一目录的circle.js。如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。如果想得到require命令加载的确切文件名，使用require.resolve()方法。{/alert}模块的缓存{alert type="info"}第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。所有缓存的模块保存在require.cache之中，如果想删除模块的缓存，可以像下面这样写。{/alert}{alert type="info"}// 删除指定模块的缓存 delete require.cache[moduleName]; // 删除所有模块的缓存 Object.keys(require.cache).forEach(function(key) { delete require.cache[key]; }){/alert}模块的加载机制{alert type="success"}CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。{/alert}CommonJS与ES6区别CommonJS模块输出的是一个值的复制 ES6模块输出的是值的引用CommonJS模块是运行时加载，ES6模块是编译时输出接口// CommonJS module.exports = { foo:"hello", bar:"world" } // 等同于 exports.default = { foo:"hello", bar:"world" } exports.foo = 'hello'// ES6 export default { foo:"hello", bar:"world" } export let foo = 'heool'

NodeJS常用命令 清除缓存{alert type="success"}npm cache clean --force{/alert}cnpm淘宝镜像安装{alert type="success"}npm install -g cnpm --registry=https://registry.npm.taobao.org {/alert}proxy代理访问{alert type="success"}npm config set registry https://registry.npm.taobao.org {/alert}安装模块{alert type="success"}## 全局安装 npm install expreess -g ## 安装到开发环境(devDependencies节点) npm install express --save-dev 等同于 npm install express -D ## 安装模块到生产环境(dependencies节点) npm install express --save 等同于 npm install express -S{/alert}版本管理工具nvm{callout color="#a8fd63"}如果想在同一台机器，同时安装多个版本的node.js，就需要用到版本管理工具nvm。{/callout}{alert type="success"}# 安装最新版本 $ nvm install node # 安装指定版本 $ nvm install 0.12.1 # 使用已安装的最新版本 $ nvm use node # 使用指定版本的node $ nvm use 0.12 # 查看本地安装的所有版本 $ nvm ls # 查看服务器上所有可供安装的版本。 $ nvm ls-remote # 退出已经激活的nvm，使用deactivate命令。 $ nvm deactivate{/alert}