use gulp once again, there are some problems

so, to remember is so important

base
some place excute

npm install –global gulp-cli
First
cmd:enter project package (gulpfile.js room)
cd E:\Moudule
Second
having installed gulp globally
npm rm –global gulp to make sure old version doesn’t collide with gulp-cli
(and then I have to excute npm install -g gulp-cli…at the beginning I didn’t so below is my try and try!!! In the end,summary to how to use gulp)
Third
create package.json
npm init
name(…):@pinglikethinking/moudule name not to use npm install…
version(…):1.0.0 to set a version
…..these can enter to next step.

y
now out of that linecoding
Fourth
create gulpfile.js

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   jshint = require('gulp-jshint'),
   concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

Fifth

npm install –save-dev gulp install gulp in project devDependencies
npm install –save-dev gulp-uglify install gulp-uglify in project devDependencies
npm install –save-dev gulp-jshint install gulp-jshint in project devDependencies
npm install –save-dev gulp-concat install gulp-uglify in project devDependencies
Sixth
Run gulp task
gulp js
the end API
npmjs.com
wait a minute, there is a problem
“It is not the command within”

Go on Go on Go on!
dos:

npm root -g =>prex=”npmglobalpath”
add npmglobalpath to Path…
But it can’t work,because I have set…
continue……
enter that root path(D:\users\My\AppData\Roaming\npm) because my users is in “D” has “gulp”and”gulp.cmd”…I didn’t have.So why?
Now install gulp global! because I have install gulp,so like this to excute
npm install -g gulp-cli
oh!there is it—-gulp.cmd!
rerun cmd to excute gulp
I have to say that because I have removed global gulp at starting!”npm rm –global gulp”.Only when there is collision,we have to
remove global gulp
npm rm –global gulp
remove gulp of our project
npm rm gulp –save-dev
Then,install global gulp
npm install -g gulp-cli OR npm install “gulpjs/gulp#4.0” -g
And install project gulp
npm install gulp –save-dev OR npm install “gulpjs/gulp#4.0” –save-dev

summary

IF VERSION COLLISION

remove global gulp
npm rm –global gulp
remove gulp of our project
npm rm gulp –save-dev
Then,install global gulp
npm install -g gulp-cli OR npm install “gulpjs/gulp#4.0” -g
And install project gulp
npm install gulp –save-dev OR npm install “gulpjs/gulp#4.0” –save-dev
IF NOT VERSION COLLISION AND AND THERE IS GLOBAL GULP!!!”GULP/GULP.CMD/Path” ALL CORRECT-THEN—-
First
create package.json
npm init
name(…):@pinglikethinking/moudule name not to use npm install…
version(…):1.0.0 to set a version
…..these can enter to next step.

y
package.json

{
  "name": "@pinglikethinking/moudule",
  "version": "1.0.0",
  "description": "the version used to test",
  "main": "gulpfile.js",
  "command": "gulp",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^2.0.1",
    "gulp-uglify": "^1.5.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "pinglikethinking",
  "license": "ISC"
}

Second
create gulpfile.js

// IMPORT gulp
var gulp = require('gulp');
 
// import components
var htmlmin = require('gulp-htmlmin'), //html min
    imagemin = require('gulp-imagemin'),//img min
    pngcrush = require('imagemin-pngcrush'),
    minifycss = require('gulp-minify-css'),//css min
    jshint = require('gulp-jshint'),//js hint
    uglify = require('gulp-uglify'),//js min
    concat = require('gulp-concat'),//files concat
    rename = require('gulp-rename'),//files rename
    notify = require('gulp-notify');//tips
 
// min html
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dest'))
    .pipe(notify({ message: 'html task ok' }));
 
});
 
// min img
gulp.task('img', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('./dest/images/'))
    .pipe(notify({ message: 'img task ok' }));
});
 
// concat、min、rename css
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dest/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dest/css'))
    .pipe(notify({ message: 'css task ok' }));
});
 
// lint js
gulp.task('lint', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({ message: 'lint task ok' }));
});
 
// concat、min js file
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dest/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'))
    .pipe(notify({ message: 'js task ok' }));
});
 
// default task
gulp.task('default', function(){
  gulp.run('img', 'css', 'lint', 'js', 'html');
 
  // watch html change
  gulp.watch('src/*.html', function(){
    gulp.run('html');
  });
 
  // Watch .css files
  gulp.watch('src/css/*.css', ['css']);
 
  // Watch .js files
  gulp.watch('src/js/*.js', ['lint', 'js']);
 
  // Watch image files
  gulp.watch('src/images/*', ['img']);
});

Third

npm install –save-dev gulp install gulp in project devDependencies
npm install –save-dev gulp-uglify install gulp-uglify in project devDependencies
npm install –save-dev gulp-jshint install gulp-jshint in project devDependencies
npm install –save-dev gulp-concat install gulp-uglify in project devDependencies
can install together
gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify –save-dev
gulp-clean-css(warning tips)
all this due to your needs
Fourth
Run gulp task
gulp
FINALLY!!!

use gulp once again, there are some problems

so, to remember is so important

the end API

wait a minute, there is a problem

But it can’t work,because I have set…

oh!there is it—-gulp.cmd!

I have to say that because I have removed global gulp at starting!”npm rm –global gulp”.Only when there is collision,we have to

summary

FINALLY!!!