Установка npm

Подробное руководство по установке npm на компьютер и созданию проекта с использованием gulp

Пишем sudo для linux или Mac

i (instal)
r(remowe)
-g (global)
ls (список)
-v (версия)

Версия Node js

node -v

Обновление Node js до последней версии:

node -v

Установка npm:

Список установленных глобальных модулей:

npm ls -g (выведет весь список зависимостей с зависимостями уже установленных модулей)

npm ls -g --depth=0(верхний уровень вложенности)
—depth=0(верхний уровень вложенности)

Установка глобального модуля:

npm i -g gulp-cli

Локальная установка (default) — модули устанавливаются в корень проекта .node_modules

Глобальная — в папку пользователя (где установлен node.js)

gulp-cli — позволяет использовать команду «gulp» в консоли

Удаление глобально модуля:

npm r -g gulp-cli

Зависимости в package.json

1
2
3
4
5
6

 "devDependencies": {
    "gulp": "^3.8.10",
  },
  "dependencies": {
    "jquery": "2.1.2"
  }

Модули из devDependencies не будут установлены на продакшн, так как они носят служебный характер (less, sass, coffee, jade) Соответствуют модификатору: --save-dev

Модули из dependencies будут включены в сборку на продакшн, так как без них проект не запустится или будет работать некорректно (jquery) Соответствуют модификатору: --save

Подготовка компьютера к работе:

1. Установить Node js https://nodejs.org/en/
2. Через консоль установить npm npm i npm
3. Установить модуль gulp-cli npm r -g gulp-cli

Создание нового проекта:

1. Создать папку проекта cd /d M:/Openserver/domains

/d — для выбора другого диска. Если проект находится на том же диске то /d не пишем

2. Установить модуль gulp npm i gulp (Модуль сборки проекта)
3. Создать файл в корне проекта gulpfile.js

Тест работы файла:

1
2
3
4
5

var gulp = require('gulp');
 
gulp.task('my_task', function(){
	console.log("My task");
})

и пропишем в консоли команду gulp my_task

4. Пример установки модуля в проект

gulp-autoprefixer

Устанавливаем пакет:
npm install --save-dev gulp-autoprefixer

Прописываем в файле gulpfile.js следующую строку:

var autoprefixer = require('gulp-autoprefixer');

Пример файла gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
 
gulp.task('my_task', function(){
	console.log("My task");
})
 
// берём все файлы css и переносим из папки precss в папку css с добавление autoprefix и минимизируем код
gulp.task('autoprefix', function(){
	gulp.src('./code-project/precss/*.css')
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
		.pipe(gulp.dest('./code-project/css'));
 
})
 
// Запускаем слежение за изменением css файлов (вызов task autoprefix)
gulp.task('scan', function(){
	gulp.watch('./code-project/precss/*.css', ['autoprefix']);
})

Вызываем gulp scan
Для завершения задачи 2 раза Ctrl + C

Копирование настроек и модулей из проекта в проект

1. Необходимо скопировать файлы: gulpfile.js и package.json
чтобы появился файл package.json необходимо набрать команду: npm init

2. Переходим в консоли в нужную папку

3. Набрать команду npm up

Как установить модуль с занесением в package.json

для этого после команды на установку используются слова —save или -dev
пример:
npm install --save
или
npm install -dev

Команды gulp:

gulp.run — вызов нужного метода

gulp.src — входной путь

gulp.dest — выходной путь

gulp.task — задача и её функция

gulp.watch — функция отслеживания изменений