构建一个前端自动化开发环境

Posted 2020-08-01

一：NPM

一：NPM（node package manager）

　　npm是node的包管理工具，主要对node包进行安装、更新、卸载、查看、搜索、发布等。

二：NPM安装

　　有两种安装，一种本地安装，package下载到当前目录，只有当前目录可使用 　　　　　　　　npm install grunt-cli

　　　　　　　　另一种全局安装，package下载到系统指定目录下，能够在所有目录下使用    　　npm install -g grunt-cli

　　　　　　　　安装成功后，会多出一个node_modules目录,grunt-cli就安装在此目录

　　　如果项目依赖很多的package，可以在package.json中声明，然后执行搞定 npm install

三 NPM卸载

　npm unistall grunt-cli

四 查看安装了哪里包

　　npm ls

　　查看全局 npm ls -g

　　查看指定package   npm ls  grunt-cli ,更详细信息 npm info grunt-cli

五 更新

　　npm update grunt-cli

六 搜索

　　npm search grunt-cli

七 发布和NPM配置，自己也没测试

二：package.json

如果我们依赖于很多包，每次npm install XX 很费事，可以直接在package.json中声明,

package.json里面包含了与项目有关的所有元数据，是给NPM信息的，识别项目以及处理改项目的依赖。还包括了项目描述，版本、作者等。（文档中所有的配置，必须是json，不是js对象）

package.json的字段：（如果没有name version无法install）

　　{

　　"name"："（必须）package名字（不能出现“. 、_”）",

　　"version"："（必须）package版本，可以以‘v’开头“,

　　"description"："描述",

　　"author"："作者",

　　"dependencies":"package依赖的模块，别人要使用package，要安装的东西，依赖模块会安装到node_modules目录下",

　　"devDependencies":"package的开发模块，即别人在这个package上进行开发",

　　"license":"ISC   项目许可协议",

　　"main":"相对于根目录的文件路径，配置一个文件指向模块的入口程序"

　　}

　　还有一些配置可在   http://www.mujiang.info/translation/npmjs/files/package.json.html 查看

　　设置好了，npm install 执行安装依赖，（package里面我已经设置安装了gulp）

 三 gulp

　　gulp是前端对代码进行自动化构建的工具，可以对网站资源进行优化，可以自动完成对js sass less html image css等文件的测试，检查，合并，压缩，格式化、浏览器自动刷新、部署文件生成、监听文件在改动后重复步骤。

　　gulp本身不会做任何事，我们可以编写任务，gulp去执行任务

　　新建gulpfile.js，测试gulp是否正常

var gulp = require(‘gulp‘);
gulp.task(‘default‘, function() {
  
});

，表示成功。

编译一个less为例：

我的项目文档结构是这样的

：

gulpfile.js所有的任务都在这里面定义：

//require加载模块，导入工具包（node_modules对应的模块）
var gulp = require(‘gulp‘), 
      less = require(‘gulp-less‘);

//定义一个testLess的任务
gulp.task(‘testLess‘, function () {
    gulp.src(‘less/*.less‘) //任务针对的文件，匹配所有的less文件，创建一个stream对象，传递给less（）函数
        .pipe(less()) //该任务的调用模块，less()对数据修改后会再返回一个stream对象，传递给gulp.dest()
        .pipe(gulp.dest(‘dist‘)); //将传输进来的数据生成文件或文件夹，不存在的文件夹将会被创建    会在dist文件下生成css
});

gulp.task(‘default‘,[‘testLess‘]);  //定义默认任务

//gulp在没有提供任务名的时候，会执行default任务，我们把testLess任务放到default前执行，所有执行$gulp,会编译less文件

　　pipe—传递数据给插件就可以

　　gulp.task（name,[deps],fn）定义任务，name任务名称，deps依赖任务名称，fn回调函数

　　gulp.src(globs)  执行任务处理的文件  globs：处理的文件路径字符串或是字符串数组

　　gulp.dest(path)  处理完后文件生成的路径

　　//文件监控，gulp可以监控一个或一组文件，当文件发生变化触发一个任务

　　gulp.watch(第一个参数：匹配待监控的文件，第二个参数是一个数组（文件变化时执行的任务队列）或回调函数   ）

　　

　　gulp常用插件：http://www.cnblogs.com/kelsen/p/4643762.html　　

 　　

　　整个会按这个教程走一遍，gogo  开始。。。http://www.cnblogs.com/kelsen/p/4993169.html

 

参考：　　http://www.cnblogs.com/chyingp/p/npm.html

　　　　　http://www.cnblogs.com/kelsen/p/4608119.html

　　　　　http://www.mujiang.info/translation/npmjs/files/package.json.html　　

　　　　　http://www.ydcss.com/archives/18

　　　　　http://www.cnblogs.com/kelsen/p/4643762.html