使用grunt壓縮,合併前端程式碼
阿新 • • 發佈：2019-02-05
-- 安裝nodejs
Windows下安裝nodejs,點選這裡,其他系統會安裝軟體,nodejs就會安裝,nodejs安裝還是很簡單的.-- 安裝grunt
使用npm全域性安裝,命令: npm install -g grunt-cli-- 測試壓縮
-- npm init
npm init建立package.json檔案
加入依賴的包.package.json內容
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "zwj", "license": "ISC", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } }
-- npm install
npm install下載所有的依賴包-- gruntfile檔案
gruntfile.js/* 2016年8月9日11:32:30 動態資料標籤和ejs模板類似 <%= %> */ module.exports = function(grunt) { grunt.initConfig({ //讀取package.json檔案資訊 pkg: grunt.file.readJSON('package.json'), //定義任務 uglify: { options: { //壓縮後的檔案註釋資訊 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { //需要壓縮的檔案 src: 'src/<%= pkg.name %>.js', //壓縮後的檔案 dest: 'build/<%= pkg.name %>.min.js' } } }); // 載入包含 "uglify" 任務的外掛。 grunt.loadNpmTasks('grunt-contrib-uglify'); // 預設被執行的任務列表。 grunt.registerTask('default', ['uglify']); };
-- 建立需要壓縮的檔案
src資料夾下demo1.js,內容就複製 gruntfile.js這個檔案裡的內容. 一切就緒.-- 執行
-----執行前目錄:
-----執行:
-----執行後:
自動建立了個build資料夾,並壓縮生成了demo1.min.js檔案
-- 測試合併
-- 再在src下加入demo2.js,和demo3.js內容和demo1.js一樣,然後合併這3個檔案. -- 修改gruntfile.js檔案------執行前:/* 2016年8月9日11:32:30 動態資料標籤和ejs模板類似 <%= %> */ module.exports = function(grunt) { grunt.initConfig({ //讀取package.json檔案資訊 pkg: grunt.file.readJSON('package.json'), //定義任務 uglify: { options: { //壓縮後的檔案註釋資訊 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, "files": { "files": { 'build/demos.min.js': ['src/demo1.js', 'src/demo2.js', 'src/demo3.js'] } } } }); // 載入包含 "uglify" 任務的外掛。 grunt.loadNpmTasks('grunt-contrib-uglify'); // 預設被執行的任務列表。 grunt.registerTask('default', ['uglify']); };
------執行後:
nodejs專欄:點選這裡 grunt外掛列表:點選這裡