设为首页 收藏本站
查看: 1065|回复: 0

[经验分享] 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用

[复制链接]

尚未签到

发表于 2017-2-24 12:08:40 | 显示全部楼层 |阅读模式
  工作环境:window下
  在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/)(外文站,最新的资料,但是打开可能比较慢https://nodejs.org/en/download/)
  这里是一篇知乎的关于node.js是什么的文https://www.zhihu.com/question/33578075
  简单的来说,它是JavaScript运行环境。更加深入,无法理解事件:1、如何通过nodejs利用JavaScript写后端语言;2、node的module是什么;3、关于V8引擎;
  任何语言只要有引擎就可以跑起来,这里相当于搭建了一个静态服务器,然后在server.js中写数据的获取,npm install express。这就是一个简单的静态服务器,可以用于数据处理。http://www.expressjs.com.cn/。
  自行理解:
  1、nodejs是一个类似于底层的开发环境,帮助JavaScript语言让计算机理解;
  2、npm是用于管理nodejs的集成安装包;
  3、nodejs有很多模块,例如压缩文件,搭建静态服务器等,这些功能需要npm进行安装。
  此文主要内容
  1、安装nodejs。
  2、安装npm,现在nodejs已经将npm集成了起来。
  3、安装cnpm,这是一个淘宝镜像文件,它的功能和npm一样,是在国内搭建的一个服务站,更新会比npm慢,但是可以基本满足开发使用,安装速度会比npm快。
  4、搭建gulp自动构建,用于检测安装包的自动架构而不是自己再一个个去写。
  5、搭建express静态服务器。
  一、nodejs和npm的安装
  1.进入nodejs的官网,进行下载。注意:如果已经有安装好的版本,不可以直接安装高版本的,它会报错。可以卸载后再安装,也可以利用vnpm来进行升级。
  安装完成以后进入cmd中进行确认,它会显示安装的版本号。



node --version
npm --version
  2.npm和nodejs现在已经集成在了一起安装好了,npm官网https://docs.npmjs.com/,在这里可以看官方文档进行更加详细的学习。
  3.安装cnpm
  淘宝cnpm镜像https://npm.taobao.org/,-g表示进行全局安装



npm install -g cnpm --registry=https://registry.npm.taobao.org
  我们同样可以使用如下来确定是否安装成功和版本号。



cnpm --version

  二、安装gulp,对于主要插件进行测试
  gulp中文网http://www.gulpjs.com.cn/docs/getting-started/,gulp插件列表http://gulpjs.com/plugins/
  先进行安装
  创建一个文件夹,例如gulptest,使用命令行,我们先要进入这个文件夹中,例如cd gulptest
  首先进行全局安装



cnpm install gulp -g
  接下来在项目文件下面进行项目开发依赖的安装



cnpm install gulp --save-dev
  项目文件下面会自动生成一个package.json文件用于记录项目下面的插件安装,这里我们需要查看一下有没有这行代码,一般情况下,我们对于一个项目先要进行初始化,
  npm init 这是为了自动生成package.json文件



"devDependencies": {
"glup": "^1.0.14"
},
  现在来安装用于压缩html,css,js和img的插件
  基本规则:cnpm install [gulp-xxxx] --save-dev,就是将插件安装起来,gulp下的插件命名都以gulp开头,插件名与插件名之间以空格隔开,如果你想要进行一次性安装的话



npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
  安装完成以后我们依旧可以进入项目根目录上的package.json文件中查看是否安装完成
  安装完成以后要开始编写运行文件了
  在根目录下面创建一个js文件,gulpfile.js文件,基础代码是



var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
  
});
  在根目录文件下命令行直接输入gulp就会默认运行这个文件中defalut代码



var gulp = require('gulp')
htmlmin = require('gulp-htmlmin')
imagemin = require('gulp-imagemin')
minifycss = require('gulp-minify-css')
uglify = require('gulp-uglify');
//压缩html
gulp.task('htmlmin',function(){
//可以不在同一个目录下面
gulp.src('./views/**/*.html')
.pipe(htmlmin({
removeComments:true
}))
.pipe(gulp.dest('./dist/views'));
});
//压缩js
gulp.task('uglify',function(){
gulp.src('./static/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/static/js'));
});
//压缩css
gulp.task('minifycss',function(){
gulp.src('./static/css/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./dist/static/css'));
});
//压缩图片
gulp.task('imagemin',function(){
gulp.src('./static/images/**/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('./dist/static/images'));
});
//动态监听
gulp.task('watch',function(){
gulp.src('./views/**/*.html',['htmlmin']);
gulp.src('./static/js/**/*.js',['uglify']);
gulp.src('./static/css/**/*.html',['minifycss']);
gulp.src('./static/images/**/*.{png,jpg,gif,ico}',['imagemin']);
})

//合并运行任务
gulp.task('default',['htmlmin','uglify','minifycss','imagemin','watch']);

  gulp.task('taskname',fuc);第一个参数时对任务进行命名,这个是可以随便命名的,在合并任务里面进行任务运行的时候添加的是对应的taskname,第二个参数时运行函数。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346647-1-1.html 上篇帖子: Hexo快速搭建静态博客并实现远程VPS自动部署 下篇帖子: CentOS 下安装 Hexo 博客
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表