安裝Node.js

直接下載，安裝

npm

1. 安裝
   較新版本Node自帶，基本不用自己裝
2. 初始化
   npm init之後一路next
3. 安裝依賴

• npm install --production安裝package.json裏已經聲明了依賴（只安裝dependencies）
• npm install安裝package.json裏已經聲明了依賴（包括：devDependencies和dependencies）

gulp

1. 全局安裝gulp（‘-g‘:全局安裝）
   npm install gulp -g
2. 下載要用到的插件（‘-g‘:全局安裝）
   npm install gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload gulp-rename -g
   
   
3. 添加一個gulp的依賴
   npm install gulp --save-dev
   項目依賴分兩種，一個就是普通的項目依賴比如bootstrap（--save），還用一種只是開發階段需要用的，這種屬於開發依賴比如gulp，開發依賴最終記錄在devDependencies節點裏面(--save-dev)
   壓縮css（gulp-minify-css）
   js代碼校驗（gulp-jshint）
   合並js文件（gulp-concat）
   壓縮js代碼（gulp-uglify）
   壓縮圖片（gulp-imagemin）
   文件重命名 （gulp-rename）
   自動刷新頁面（gulp-livereload）
   更改提醒（gulp-notify）
   合並js順序（gulp-order）
   
4. 構建gulpfile.js
   在項目的根目錄，新建一個gulpfile.js的文件，這個是gulp的主執行文件，且文件名是固定的，不能修改，gulp命令執行的時候，會去找這個文件。
5. 執行gulp
   gulp輸入gulp即可

gulpfile.js：

//引入插件
var gulp = require(‘gulp‘),
   // minifycss = require(‘gulp-minify-css‘),
   uglify = require(‘gulp-uglify‘), //壓縮js代碼
   rename = require(‘gulp-rename‘), //文件重命名
   concat = require(‘gulp-concat‘), //合並js文件
   notify = require(‘gulp-notify‘), //更改提醒
   livereload = require(‘gulp-livereload‘); //自動刷新頁面

//js代碼校驗、合並和壓縮（類似jquery的鏈式操作）
gulp.task(‘scripts‘, function() {
   return gulp.src(‘src/**/*.js‘) //源文件
       .pipe(concat(‘empty_dimension.js‘))  //合並js文件，empty_dimension.js為合並的文件名稱
       .pipe(gulp.dest(‘dist‘))  //合並後文件存放位置
       .pipe(rename({
           suffix: ‘.min‘
       }))
       .pipe(uglify())         //執行壓縮任務
       .pipe(gulp.dest(‘dist‘))  //壓縮後文件存放位置
       .pipe(notify({    //操作結束後提示
           message: ‘Scripts task complete‘
       }));
});
// 默認任務，這裏完全可以是多個任務，比如壓縮CSS，壓縮圖片，壓縮js等
gulp.task(‘default‘,[‘watch‘], function() {
   gulp.start(‘scripts‘);
});
// 監聽
gulp.task(‘watch‘, function() {
   // 監聽 .js文件改動，一旦改動就會自動壓縮合並
   gulp.watch(‘src/**/*.js‘, [‘scripts‘]);
   // Create LiveReload server（用來自動刷新瀏覽器）
   livereload.listen();
   // Watch any files in dist/, reload on change
   gulp.watch([‘dist/**‘]).on(‘change‘, livereload.changed);
});
 

Nodejs和前端自動化