亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Grunt-beginner前端自動化工具

難度高級
時長 4小時55分
學習人數
綜合評分9.60
46人評價 查看評價
9.9 內容實用
9.4 簡潔易懂
9.5 邏輯清晰
  • gulp.task
    gulp.src
    gulp.dest
    gulp.watch


    查看全部
  • 查看全部
  • [email protected]?
    yo?webapp?grunt-yo-webapp?
    grunt?serve?--force


    查看全部
  • 查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????files:?[
    ??????????????????{
    ??????????????????????expand:?true,
    ??????????????????????cwd:?'<%=?config.app?%>/',
    ??????????????????????src:?'**/*.js',
    ??????????????????????dest:?'<%=?config.dist?%>/',
    ??????????????????????ext:?'.js',
    ??????????????????????extDot:?'last',
    ??????????????????????flatten:?true,
    ??????????????????????rename:?function(dest,?src)?{
    ??????????????????????????return?dest?+?'js/'?+?src;
    ??????????????????????}
    ??????????????????}
    ??????????????]
    
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?['<%=?config.dist?%>/**/*']
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????files:?[
    ??????????????????{
    ??????????????????????expand:?true,
    ??????????????????????cwd:?'<%=?config.app?%>/',
    ??????????????????????src:?'*.html',
    ??????????????????????dest:?'<%=?config.dist?%>/',
    ??????????????????????ext:?'.min.html'
    ??????????????????}
    ??????????????]
    ??????????????//?files:?{
    ??????????????//?????'<%=?config.dist?%>/index.html':?'<%=?config.app?%>/index.html',
    ??????????????//?????'<%=?config.dist?%>/js/index.js':?'<%=?config.app?%>/js/index.js'
    ??????????????//?}
    
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?['<%=?config.dist?%>/**/*']
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????files:?{
    ??????????????????'<%=?config.dist?%>/index.html':?'<%=?config.app?%>/index.html',
    ??????????????????'<%=?config.dist?%>/js/index.js':?'<%=?config.app?%>/js/index.js'
    ??????????????}
    
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?['<%=?config.dist?%>/**/*'],
    ??????????????filter:?function(filepath)?{
    ??????????????????return?(!grunt.file.isDir(filepath));
    ??????????????}
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????files:?{
    ??????????????????'<%=?config.dist?%>/index.html':?'<%=?config.app?%>/index.html',
    ??????????????????'<%=?config.dist?%>/js/index.js':?'<%=?config.app?%>/js/index.js'
    ??????????????}
    
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?['<%=?config.dist?%>/**/*']
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????files:?[
    ??????????????????{
    ??????????????????????src:?'<%=?config.app?%>/index.html',
    ??????????????????????dest:?'<%=?config.dist?%>/index.html'
    ??????????????????},
    ??????????????????{
    ??????????????????????src:?'<%=?config.app?%>/js/index.js',
    ??????????????????????dest:?'<%=?config.dist?%>/js/index.js'
    ??????????????????}
    ??????????????]
    
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?[
    ??????????????????'<%=?config.dist?%>/index.html',
    ??????????????????'<%=?config.dist?%>/js/index.js'
    ??????????????]
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • 'use?strict';
    
    module.exports?=?function(grunt)?{
    ??require('load-grunt-tasks')(grunt);
    
    ??require('time-grunt')(grunt);
    
    ??var?config?=?{
    ??????app:?'app',
    ??????dist:?'dist'
    ??};
    
    ??grunt.initConfig({
    ??????config:?config,
    
    ??????copy:?{
    ??????????dist:?{
    ??????????????src:?'<%=?config.app?%>/index.html',
    ??????????????dest:?'<%=?config.dist?%>/index.html'
    ??????????}
    ??????},
    
    ??????clean:?{
    ??????????dist:?{
    ??????????????src:?'<%=?config.dist?%>/index.html'
    ??????????}
    ??????}
    ??})
    };


    查看全部
  • npm?init
    npm?install?grunt?--save-dev
    npm?install?load-grunt-tasks?--save-dev
    npm?install?time-grunt?--save-dev


    查看全部
  • bower?install?jquery?
    bower?install?bootstrap
    bower?init


    查看全部
    0 采集 收起 來源:bower實戰

    2020-02-03

  • 安裝:

    https://yeoman.io/

    npm?install?-g?yo

    安裝:

    https://bower.io/

    npm?install?-g?bower
    
    bower?-v

    安裝:

    https://www.gruntjs.net/

    npm?install?-g?grunt-cli
    
    grunt


    查看全部
  • 查看全部
  • mark
    查看全部
  • 主流方式有幾種
    查看全部
  • 1. yeoman安裝

    npm install -g yohttps://img1.sycdn.imooc.com//5c009f5f0001a65405950489.jpg

    https://img1.sycdn.imooc.com//5c009f5d00018d4c02300039.jpg

    2. bower安裝

    npm install -g bower

    https://img1.sycdn.imooc.com//5c009f5e000135f207860667.jpg

    2. grunt安裝

    npm install -g grunt-cli

    https://img1.sycdn.imooc.com//5c009f5f0001a4c707030617.jpg


    查看全部
  • 1. nodejs安裝

    https://img1.sycdn.imooc.com//5c009da20001f62f07990450.jpg

    2. 命令行工具

    1) mac Linux

    https://img1.sycdn.imooc.com//5c009da40001c32809160564.jpg

    2) windows

    https://img1.sycdn.imooc.com//5c009da20001d85b10220443.jpg

    3. npm?

    https://img1.sycdn.imooc.com//5c009da3000178fe09660516.jpg

    https://img1.sycdn.imooc.com//5c009da500013fae06540385.jpg

    https://img1.sycdn.imooc.com//5c009da40001118905080156.jpg



    查看全部
    0 采集 收起 來源:nodejs簡介

    2018-11-30

  • 主流方式幾種

    https://img1.sycdn.imooc.com//5c009c1e0001617f10320578.jpg

    查看全部
  • npm publish 組件github地址,進行npm 插件發布

    查看全部
  • npm install -g yo

    查看全部
  • 在node下安裝 Yeoman、Bower、Grunt

    1、Yeoman 官網:http://yeoman.io/(現在Web App 的腳手架工具)

    作用:

    a)在Web項目的立項階段,使用Yeoman來生成項目的文件和代碼結構。

    b)Yeoman自動將最佳實踐和工具整合進來,大大加速和方便了我們后續的開發

    c)提供 代碼校驗、測試、壓縮基本工作流程,其余交給生成器自由發揮

    2、安裝Yeoman

    命令安裝:npm install -g yo(-g 表示安裝在全局)

    安裝成功如圖:

    https://img1.sycdn.imooc.com//5b6920fc000127d505670354.jpg

    安裝完之后執行命令:yo -v(打印yeoman的版本號)

    Bower的安裝

    Bower:web的包管理器

    web站點組成:框架、庫、公共部分等。而Bower則用來跟蹤管理這些

    比如:項目A,項目B,A項目使用jquery1.11.1,B項目使用jquery2.1.1以前的做法是去jquery官網下載這兩個版本分別放入各自項目中使用。有Bower之后,你需要哪個他就會自動下載哪個到你應用的項目中

    安裝Bower?

    安裝命令:npm install -g bower

    查看版本 bower -v

    https://img1.sycdn.imooc.com//5b6924000001c1b002440047.jpg

    Grunt 安裝

    官網: http://gruntjs.com/

    Grunt 另一個說法 Build tool

    作用:自動化,減少像壓縮、編譯、單元測試、代碼校驗這種重復且無業務關聯的工作。gurnt有強大的生態插件,插件一直在生長

    Grunt 安裝

    還是標準的npm包安裝方式?

    命令:npm install -g grunt-cli(cli 是command line interface 的縮寫)

    再執行命令: grunt

    結果如圖:(看到這個錯誤消息說明安裝成功,為什么會用一個錯誤消息,是因為grunt-cli會執行當前目錄中package.json文件中指定的安裝版本來讀取我們當前所在目錄下的grunt file配置文件,然后按照里面的配置項來對我們的項目執行自動化。為什么要這么設計呢,就是為了可以讓多個版本的grunt來并存,以便支持新老項目)

    https://img1.sycdn.imooc.com//5b6926fe0001faa305120149.jpg


    查看全部
  • 1、先安裝nodejs ,在官網下載傻瓜模式安裝(nodejs.org)

    安裝nodejs注意事項:

    windows平臺下創建的用戶不要用空格,如果創建的已經有空格了就再重新創建一個可以得到解決。

    windows平臺要安裝git,因為cmd不支持bash腳本,git中有git bash shell

    2、nodejs中有很多基本模塊、框架、庫,那么NPM就是用來很快找到特定服務要使用的包并且下載、安裝、管理的一個插件

    3、NPM——Node Package Manager?

    ? ? 不用單獨安裝,因為nodejs安裝時就已經自帶安裝了NPM

    4、NPM使用:

    ? ?運行命令:npm install -g grunt-cli (l輸入命令之后 NPM就是自動幫我們安裝好grunt,命令里 -g的意思是:全局安裝,就是整個系統都可以使用 grunt)

    如果不帶-g時 運行案例:

    pwd:顯示當前目錄路徑

    mkdir:新建目錄(mkdir testnodejs)

    cd:進入目錄(cd testnodejs)

    進入之后 運行命令:

    npm install grunt-cli(安裝grunt,如果沒有帶-g就會在當前目錄生一個 node_modules的目錄,并且將相關的程序安裝在node_modules目錄中)

    輸入命令之后如圖:


    生成的目錄如圖:(命令:ll 列出當前目錄下的文件詳情目錄)

    https://img1.sycdn.imooc.com//5b691aed000157da07460215.jpg

    https://img1.sycdn.imooc.com//5b691b1000018a7f06790511.jpg

    如果直接輸入命令 npm install 就會報錯,這樣的命令也可以執行,執行時就會自動去查找 項目目錄下的package.json文件,根據這個文件里的聲明去安裝。沒找到就會報錯如圖:


    NPM主要是查入package.json文件的 dependencies這一項,這一項表示:當前項目主要依賴于哪些NPM的組件

    查看全部
    0 采集 收起 來源:nodejs簡介

    2018-08-07

  • bower 是web的包管理器

    查看全部
    0 采集 收起 來源:bower實戰

    2018-08-03

  • 之后輸入 ls -al?

    ls表示:列出當前目錄的bash命令??

    al表示:把隱藏的文件及這些帶點開頭的文件以詳細列表的方式顯示出來

    查看全部
    0 采集 收起 來源:Yeoman實踐

    2018-08-03

  • 1、安裝?angular mvc 或mvvm模式框架

    npm install -g generator-angular

    創建一個目錄?

    創建: mkdir yo-in-action

    進入:cd yo-in-action/

    創建:mkdir angular-in-action

    進入:cd angular-in-action

    生成一個項目:

    yo angular learnangular


    https://img1.sycdn.imooc.com//5b6453a800016c9d05560116.jpg

    查看全部
    0 采集 收起 來源:Yeoman實踐

    2018-08-03

  • npm 是包管理和分發工具?

    查看全部
    1 采集 收起 來源:nodejs簡介

    2018-04-23

  • JavaScript --瀏覽器

    nodejs --服務器

    查看全部
    0 采集 收起 來源:nodejs簡介

    2018-04-23

  • bower install jquery??

    bower install jquery/jquery git短地址


    查看全部
    0 采集 收起 來源:bower實戰

    2018-04-11

首頁上一頁1234567下一頁尾頁

舉報

0/150
提交
取消
課程須知
1.想提高運行前端開發工作流程 ; 2.有一些項目開發經驗,效果會更好。
老師告訴你能學到什么?
1. Grunt工具和插件的安裝 2. 如何進行項目配置 3. 如何配置任務 4. 如何執行任務 5. Grunt的使用

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!