设置nodejs分外简单

能够毫无夸张的说,那本小册只怕是当下社区中最完好的把 npm script
和前端工作流相结合并行使到实在项目中的文字 + 录制版教程了。

Grunt/居尔p
都以node.js下的模块,简单的话是自动化职务运维器,两者都有社区及大气的插件支撑,在具备的自动化学工业具领域里,那二者是最佳的前端自动化营造筑工程具。
  Grunt和有着grunt插件都以依据nodejs来运作的,借使你的微型计算机上平素不nodejs,就去安装吧。安装nodejs万分简单,完全傻瓜式、下一步下一步下一步、的设置情势,那里不再赘言。去
https://nodejs.org/
上,点击页面中十一分深翠绿、大大的“install”按钮即可。
  安装了nodejs之后,能够在你的控制纽伦堡输入“node
-v”来查看nodejs的本子,也顺带试验nodejs是还是不是安装成功。

互连网大潮和前端社区的蓬勃发展让现代前端项目标复杂比 5
年前翻了广大倍,前端工作流中也油可是生了更进一步多工程化的环节,比如代码风格检查、自动化测试、自动化创设、自动化布置、服务监督、正视管理等。

【grunt】前端自动化学工业具

官网:gruntjs.com
前提:基于nodejs
证实环境 node -v
npm -v node的三个包管理器
新的node版本自带npm,老的不带

大家面临怎样难题?

大部前端工程师的工作流大概都离不开 gulp、grunt、webpack
那样的重量级创设筑工程具,而是不是能运用自如运用那个工具将再也任务自动化也是工程师素质的首要显示,笔者自个儿也是这么些自动化学工业具的忠诚观众,因为它们确实能帮本人消除难题。但几番悲惨之后,你恐怕早就如本人一样感受到明显的痛点:比如对插件正视严重(开发者的自由度受限),插件和尾部工具文书档案脱节,调节和测试变的更扑朔迷离等,在这一点上,大家并不孤单,社区业已有人对地点的标题作出总括并写了稿子:Why
I left gulp and grunt for npm
scripts

就自笔者要好的亲身经历,小编曾接手维护过使用了 39 个 gulp
插件的品种,因为项目运营较早,部分插件所正视的根基工具版本都相比老,当这几个插件所依赖的功底工具升级之后,gulp
插件本人并不曾更新的那么快,我只能 fork 原仓库去体贴当中的版本,而当
gulp 公布了新本子之后,升级插件更是一场劳苦的持久战。

空荡荡思考下来,上边那种复杂其实并不曾须要,在软件工程里面有个首要的标准,正是不难性,越是简单的事物尤其可信赖,从可能率论的角度,任何系统环节越多稳定性越差。

选择流程

我们该怎么化解难题?

比较而言,直接利用 npm 内置的 script
机制已经被很多开发者表明是更好的抉择,它能减轻甚至裁撤上边的痛点:你能够平昔动用海量的
npm
包来形成你的职分、不需求在插件文书档案和根基工具文书档案间来回切换,最关键的点,不利用
grunt
之类的创设筑工程具能让您的技艺栈相对更简明,而自作者在做技术选择是安份守己的主干尺度是简单化,不难才有大概简单令人家上手。

使用 npm script 各样基础工具你都得以随手拈来,只要你会选取
npmjs.com
去搜索,或者去
libraries.io
上搜索。

兴许有同学会反问,Talk is cheap, show me the data,下边那张图是最佳的认证:

图片 1

更精确的数据是:截止 2017年11月,grunt 插件 6309 个,gulp 插件 3367 个,webpack 插件数量 2174 个,而 npm 包多达 594438 个,并且还在飞速增长

那 npm script 为何向来不没有在构建工具中成为主流呢?可能大部分人以为选用npm script
须求很强的一声令下行功底、恐怕它不够强大、或许它不能够跨平台。能够很负总责的说,社区进步到今天,上边的顾虑都以多余的。

① 、安装grunt命令环境(想要用命令运营grunt必须装)

npm install grunt-cli -g
-cli成立命令行 -g全局

如何更快更好的缓解难点?

那也是丹佛掘金(Denver Nuggets)小册《使用 npm script
营造超溜前端工作流》
的切入点,作者在那本小册中会用
step-by-step 的方式教师现代前端工作流中的 npm script
用法。即使你是命令行小白,也能自在跟上,小册会以实际前端项目为底板逐步介绍更高阶的话题。学完那本小册,你将熟悉使用
npm script 创设前端工作流要用的各样小工具和技能。

小册的剧情划分为 4 篇:

  • 入门篇:成立和平运动转 npm script,熟练和驾驭基本套路,分 3 小节;
    • 1.1 创制并运维 npm script 命令
    • 1.2 运转四个 npm script 的各类姿势
    • 1.3 给 npm script 传递参数和增加注释
  • 进阶篇:原来 npm script 还能这么用?分 3
    小节,介绍生命周期机制、内置和自定义变量的宣示和利用、命令行自动补全等话题;

    • 2.1 使用 npm script 生命周期钩子
    • 2.2 在 npm script 中应用环境变量
    • 2.3 完结 npm script 命令自动补全
  • 高阶篇:怎么样保管复杂的 npm script?分 3 小节,介绍;
    • 3.1 让 npm script 跨平台兼容
    • 3.2 用 scripty 管理复杂的 npm script
    • 3.3 用 node/shell 脚本替代复杂的 npm script
  • 实战篇:如何用 npm script 来援助前端工作流?分 5 小节;
    • 4.1 监听文件变化并机关运转 npm script
    • 4.2 结合 live-reload 达成自动刷新
    • 4.3 在 git hooks 中运行 npm script
    • 4.4 用 npm script 完毕创设流水生产线
    • 4.5 用 npm script 达成劳务自动化运转

为了有利于我们阅读小册时特别不难上手,自家为小册的各样章节都摄像了视频教程(录像下载地址在小册末尾),想打听小编摄像教程风格和品质的同室能够看本身专栏的历史篇章:styled-componentsjavascript-async-await。摄像目录如下:

图片 2

video-toc.png

贰 、验证是否安装

grunt –version
上述申明 grunt命令环境已经装好

适合哪些群体?

  • 拥抱 无情的推动自动化 开发理念的工程师,不限前端;
  • 感触到 grunt、gulp 之类工具的笨重和不便,想要更轻量级的缓解方案;
  • 想玩转 npm script,不断打磨本身硬技能,提升普通工效的同校;
  • 甘当因为本身编写小册和摄像录制而付出的头脑而请小编喝杯咖啡(19.9元)的校友;

叁 、进入本半夏件 cd 文件名/文件名

grunt必要八个公文:
package.json 项目标布局文件
配备一体项目情形,项目标称谓,项目标本子,项目标撰稿人,项目重视的模块(插件)
Gruntfile.js 配置grunt 设置插件的利用

您会学到什么?

  • 通晓使用 npm script 的重大知识要点;
  • 精通 25 个 npm script 实战技能,章节虽少,可是各种章节都以浓缩的;
  • 赢得使用 npm script 和各样小工具消除种种前端工程自动化必要;
  • 获得小编长时间积聚和迭代出来的 npm script 集合,直接运用到项目中;

4、npm init

创建出package.json
name 项目名称(千万别用grunt)

您要准备哪些?

  • Node.js
    运维环境,最棒是 v8.x 以上版本,提议利用
    nvm
    来安装,Windows 下的用户能够应用
    nvm-windows
  • 能够用来输入和执行命令的终极程序,比如 Mac 下的
    iTerm,或者
    Windows 下的 cmd;
  • 2
    小时的空闲时间,读完那本小册,并能自身左手实践,因为纸上得来终觉浅;

伍 、安装本地grunt

npm install grunt –save-dev

读者举报如何

下边是到如今截止小册收集到的一对读者反馈,对于各位读者的留言,小编都会认真回复,如果您加了读者沟通群,在群里提到的题材,小编也会尽力解答。

图片 3

图片 4

图片 5

陆 、须求预备文件

Gruntfile.js 编写职分

小编简介

自个儿是王仕军,爱折腾、爱享受的前端老开车员,实名在网上生活了 5 年有余,6
年以上前端开发经验(实际是 8 年,哈哈),4
年大型互连网企业管理办公室事经历;丹佛掘金队(Denver Nuggets)专栏作者;熟识(是的,到昨日本人还不敢说精晓)
JavascriptNode.js,对开发功效和软件品质有极度追求。指标是
Be a Power User of Everything

感激读到那里,希望笔者写的东西对你有用!

七 、编写具体任务

module.exports=function(grunt){
    console.log('111')
    }

封存模块的几种艺术

a)npm install 模块名

把此模块,安装到本项目目录中

b)npm install 模块名 –save

不光会把模块安装到本目录,会写入package.json文件中,写到dependencies选项中

c)npm install 模块名 –save-dev 推荐的

不仅仅会把模块安装到本目录,会写入package.json文件中,写到devDependencies选项中


常用插件下载:

插件:
http://gruntjs.com/plugins
有关grunt插件的归类:
壹 、grunt团队温馨费用的contrib
贰 、第1方编写的
grunt常用插件:

    grunt-contrib-watch 监听变化

    grunt-contrib-uglify 压缩js

    grunt-contrib-cssmin 压缩css

    grunt-contrib-htmlmin 压缩html

    grunt-contrib-imagemin 压缩图片

相比较常用的

    grunt-contrib-concat 合并文件

    grunt-contrib-clean 删除文件以及文件夹

    grunt-contrib-cope 复制东西

    grunt-contrib-jshint 检测js代码语法

    grunt-contrib-less 编译less文件

下载插件(在命令行中)
npm install grunt-contrib-less –save-dev

编辑流程:

   module.exports=function(grunt){
//1.导入模块
grunt.loadNpmTasks('grunt-contrib-uglify');

//2配置具体任务
grunt.initConfig({
    主任务:{    //主任务名和模块名一样(uglify)
        a:{  //子任务名随便
            src:'XXX',  //源文件
            dest:'XXX' // 目标文件
        }
    }
});
//3注册一个默认任务
grunt.registerTask('default',['uglify','htmlmin']);
  }

运行:
grunt 主职务名
grunt 主任务名:次职分名
grunt

一般项目中外人不会把下载好的给您,只会把安排文件给你,
只给项目和Gruntfile.js,package.json
壹 、npm install 下载package.json中devDependencies里的富有重视模块
2、grunt
grunt:目录名称不可能用括号

全体编写步骤:Gruntfile.js

module.exports=function(grunt){
    //1.导入模块
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //2配置具体任务
    grunt.initConfig({
        uglify:{
            a:{
                src:'src2/js/*.js',
                dest:'build/js/main.js'
            }
        },
        cssmin:{
            a:{
                src:'src2/css/*.css',
                dest:'build/css/main.css'
            }
        },
        htmlmin:{
            options:{
                removeComments:true,
                collapseWhitespace:true
            },
            a:{
                src:'src2/new.html',
                dest:'build/new.html'
            }
        },
        imagemin:{
            a:{
                expand:true,
                cwd:'src2/img',
                src:'*.gif',
                dest:'build/img'
            }
        },
        watch:{
            a:{
                files:['src2/new.html','src2/css/*.css'],
                tasks:['htmlmin','cssmin']
            }
        }
    });
    //3注册一个默认任务
    grunt.registerTask('default',['uglify','cssmin','htmlmin','imagemin','watch']);
}

gulp:

跟grunt一模一样,不过要比grunt块,gulp原理的二进制的流,grunt是文件
官网:gulpjs.com

骨干流程

① 、安装3个gulp的下令环境

npm install gulp-cli -g

贰 、验证是或不是是ok的

gulp –version

③ 、准备多少个文本

gulpfile.js 义务编写文件
自动生成package.json
命令:npm init 一路回车

④ 、npm install gulp –save-dev //下载本地的gulp

5、下载gulp的插件

gulp常用插件:
gulp-watch 监听变化

            gulp-uglify 压缩js

            gulp-cssmin 压缩css

            gulp-htmlmin 压缩html

            gulp-imagemin 压缩图片

六 、编写职责

//1、引用模块
      var uglify =require(‘gulp-uglify’)
      //2、配置任务
      gulp.task('uglify(这是任务名 随便起)',function(){
         gulp.src('src/a.js')
         .pipe(uglify({mangle:false}))
         .pipe(gulp.dest('dest'));
      })
      //3、配置默认项
      gulp.task('default',['任务名']);

   注:gulp中内置的watch不用下载
      gulp.watch('文件名',['任务名'])

一体化编写步骤:gulpfile.js

//引入模块
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');

//编写任务
gulp.task('uglify:css',function(){
    gulp.src('src/css/*.css')
    .pipe(cssmin())
    .pipe(gulp.dest('build/css'))
});
gulp.task('uglify:js',function(){
    gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('build/js'))
});
gulp.task('uglify:img',function(){
    gulp.src('src/img/*.gif')
    .pipe(imagemin())
    .pipe(gulp.dest('build/img'))
});
gulp.task('uglify:html',function(){
    gulp.src('src/new.html')
    .pipe(htmlmin({
        collapseWhitespace:true
    }))
    .pipe(gulp.dest('build/new.html'))
});
//监听模块
gulp.watch('src/new.html',['uglify:html']);
//注册默认任务
gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);

相关文章