zoukankan      html  css  js  c++  java
  • 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用

    工作环境: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,第二个参数时运行函数。

  • 相关阅读:
    ubuntu12.04 死机 卡屏 画面冻结解决方案
    Install Firefox 20 in Ubuntu 13.04, Ubuntu 12.10, Ubuntu 12.04, Linux Mint 14 and Linux Mint 13 by PPA
    ListView1.SelectedItems.Clear()
    android studio 下载地址
    jquery.slider.js jquery幻灯片测试
    jquery.hovermenu.js
    jquery.tab.js选项卡效果
    适配 placeholder,jquery版
    jquery.autoscroll.js jquery自动滚动效果
    将 Google Earth 地图集成到自己的窗体上的 简单控件
  • 原文地址:https://www.cnblogs.com/hodgson/p/6067294.html
Copyright © 2011-2022 走看看